<!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{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(" " + css(oBox, "width") + " height: " + css(oBox, "height") + " background-color: " + css(oBox, "backgroundColor")) }; //第二个按钮点击事 aInput[1].onclick = function () { //两个参数, 第二个参数为对象, 属性批量设置 css(oBox, { "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, { "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 5fae8f6f96c59ed1;} form{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;100%;height:31px;margin-top:10px;line-height:31px;} form label,form input{float:left;} form label{100px;height:31px;text-align:right;} form input{border:0;font-family:5fae8f6f96c59ed1;background:url(img/input.png) no-repeat;} form .f-text,form .f-text-high{203px;height:31px;padding-left:5px;line-height:31px;} form .f-text-high{background-position:0 -31px;} form .f-btn{color:#fff;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>