agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显
2015-05-03 23:14
513 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>agruments应用——求出函数参数的总合</title> <style> pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;} span{color:#999;} </style> </head> <body> <pre> <script type="text/javascript"> var i = iResult = 0 function sum() { for (var i = 0; i < arguments.length; i++) { iResult += arguments[i] } return iResult } <span>//应用</span> alert(sum(1,2,3,4,5,6,7,8,9,10)) <span>//输出55</span> </script> </pre> <script type="text/javascript"> var i = iResult = 0 function sum() { for (var i = 0; i < arguments.length; i++) { iResult += arguments[i] } return iResult } //应用 alert(sum(1,2,3,4,5,6,7,8,9,10)) </script> </body> </html>
css函数——设置/读取对象的属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css函数——设置/读取对象的属性</title> <style> div{width:400px;height:200px;background:#fef4eb;border:1px solid #f60;margin:0 auto;} input{border:0;color:#fff;cursor:pointer;font-weight:700;background:#f60;padding:2px 4px;margin:10px 0 0 10px;} </style> <script type="text/javascript"> function css(obj, attr, value) { switch (arguments.length) { case 2: if(typeof arguments[1] == "object") { //二个参数, 如果第二个参数是对象, 批量设置属性 for (var i in attr)obj.style[i] = attr[i] } else { //二个参数, 如果第二个参数是字符串, 读取属性值 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr] } break; case 3: //三个参数, 单一设置属性 obj.style[attr] = value; break; default: alert("参数错误!") } } window.onload = function () { var oBox = document.getElementById("box"); var aInput = oBox.getElementsByTagName("input"); //第一个按钮点击事件 aInput[0].onclick = function () { //两个参数, 第二个参数为字符串, 读取属性值 alert("width: " + css(oBox, "width") + "\nheight: " + css(oBox, "height") + "\nbackground-color: " + css(oBox, "backgroundColor")) }; //第二个按钮点击事 aInput[1].onclick = function () { //两个参数, 第二个参数为对象, 属性批量设置 css(oBox, {width: "330px", height: "100px", borderColor: "#0084ff", backgroundColor: "#eff8ff"}); //三个参数, 属性单一设置 for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#0084ff") } //第三个按钮点击事件 aInput[2].onclick = function () { //两个参数, 第二个参数为对象, 属性批量设置 css(oBox, {width: "400px", height: "200px", borderColor: "#f60", backgroundColor: "#fef4eb"}); //三个参数, 属性单一设置 for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#f60") } }; </script> </head> <body> <div id="box"> <input type="button" value="Get Style" /><input type="button" value="Set Style" /><input type="button" value="Default Style" /> </div> </body> </html>
当前输入框高亮显
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>当前输入框高亮显示</title> <style> body,form,h2,p,input{margin:0;padding:0;} body{color:#4f4f4f;font:14px/1.5 \5fae\8f6f\96c5\9ed1;} form{width:400px;background:#fef4eb;border:2px solid #f60;padding-bottom:10px;overflow:hidden;zoom:1;margin:10px auto;} form h2{color:#fe791e;font-size:16px;background:#ffebd7;border-bottom:2px solid #f60;padding:5px 10px;} form p{float:left;clear:both;width:100%;height:31px;margin-top:10px;line-height:31px;} form label,form input{float:left;} form label{width:100px;height:31px;text-align:right;} form input{border:0;font-family:\5fae\8f6f\96c5\9ed1;background:url(img/input.png) no-repeat;} form .f-text,form .f-text-high{width:203px;height:31px;padding-left:5px;line-height:31px;} form .f-text-high{background-position:0 -31px;} form .f-btn{color:#fff;width:104px;height:31px;cursor:pointer;font-size:16px;background:#f60;line-height:31px;border-radius:5px;} </style> <script type="text/javascript"> window.onload = function () { var aInput = document.getElementsByTagName("input"); var i = 0; for (i = 0; i < aInput.length - 1; i++) { aInput[i].onfocus = function () { this.className = "f-text-high" }; aInput[i].onblur = function () { this.className = "f-text" } } }; </script> </head> <body> <form> <h2>用户登录</h2> <p><label>用户名:</label><input class="f-text" type="text" /></p> <p><label>密码:</label><input class="f-text" type="password" /></p> <p><label></label><input class="f-btn" type="button" value="登 录" /></p> </form> </body> </html>
相关文章推荐
- 作品第四课----css函数一设置/读取对象的属性
- 作品第四课----agruments应用一求出函数参数的总合
- Python基本语法_函数属性 & 参数类型 & 偏函数的应用
- javascript函数内设置传入参数对象导致函数外的实参被修改
- (18)servletContext应用:获取web应用的初始化参数、实现servlet转发、利用servletContext对象读取资源文件
- DroneKit教程(四):属性和参数的读取与设置
- [html&css]Pass Through - 41.HTML 使用负值设置页面元素的margin属性
- CSS&nbsp;属性设置优先级问题
- 使用此参数设置的访问点: ->S7ONLINE 函数调用 SRMD_Set(..) 中出现错误
- java读取和设置配置文件中的属性参数
- JavaScript函数之实际参数对象(arguments) / callee属性 / caller属性 / 递归调用 / 获取函数名称的方法
- C#面向对象方式设置、读取应用配置
- 字符串使用&&引用对象作为函数参数
- H5学习笔记——CSS文本设置属性&颜色表示法
- PHP var_dump遍历对象属性的函数与应用代码
- php引用(&)变量引用,函数引用,对象引用和参数引用用法
- Swift 各种闭包各种使用 && 设置参数,函数传值
- ios学习--layer的应用(设置UIView子类边框属性&字体阴影属性)
- CSS格式化版本&nbsp;属性设置
- Js 获取当前函数参数对象的实现代码