JS隔行变色登录全选等操作
JS代码
//隔行变色 function testul() { var ul = document.getElementById("testul"); var link = ul.getElementsByTagName("li"); //获取li元素 for (i = 0; i < link.length; i++) { if (i % 2 != 0) { //偶数行变色 link[i].style.background = "Red"; } } } /* function testinput() { var input = document.getElementsByTagName("input"); for (i = 0; i < input.length; i++) { input[i].onclick = function () { for (i = 0; i < input.length; i++) { input[i].style.background = "white"; } this.style.background = "yellow"; } } } */ //鼠标事件文本框背景变色 function testinput() { var input = document.getElementsByTagName("input"); for (i = 0; i < input.length; i++) { if (input[i].type == "text") { //鼠标获取焦点时文本框背景变色 input[i].onfocus = function () { this.style.background = "yellow"; } //恢复白色背景 input[i].onblur = function () { this.style.background = "white"; } } } } //鼠标事件改变字体大小变色 function testulonclick() { var ul = document.getElementById("ulonclick"); var links = ul.getElementsByTagName("li");//获取ul内的li元素。 for (i = 0; i < links.length; i++) { var link = links[i]; link.style.cursor = "pointer";//鼠标手型 link.onmouseover = function () { //注册鼠标移到元素上事件 for (i = 0; i < links.length; i++) { var link = links[i]; if (link != this) { links[i].style.fontSize = "16px";//字体大小，要加px link.style.background = "white";//背景颜色 } else { this.style.fontSize = "30px"; this.style.background = "Red"; } } } } } //显示登录框 function btn_login() { var login = document.getElementById("logindiv"); login.style.display = "block"; } //隐藏登录框 function login_close() { var login = document.getElementById("logindiv"); login.style.display = "none"; return false; } //全选checkbox function all_btn() { var ul = document.getElementById("checkul"); var box = ul.getElementsByTagName("input"); for (i = 0; i < box.length; i++) { var link = box[i]; if (link.type == "checkbox") { link.checked = true; } } } //全不选checkbox function allclose_btn() { var ul = document.getElementById("checkul"); var box = ul.getElementsByTagName("input"); for (i = 0; i < box.length; i++) { var link = box[i]; if (link.type == "checkbox") { link.checked = false; } } } //反选checkbox function re_btn(){ var ul = document.getElementById("checkul"); var box = ul.getElementsByTagName("input"); for (i = 0; i < box.length; i++) { var link = box[i]; if (link.type == "checkbox") { if (link.checked == true) { link.checked = false; } else { link.checked = true; } } } } //左右移动select function select_btn(one, two) { var sel1 = document.getElementById(one); var sel2 = document.getElementById(two); for (i = sel1.childNodes.length-1; i >= 0; i--) { var option = sel1.childNodes[i]; if (option.selected == true) { sel1.removeChild(option); option.selected = false; sel2.appendChild(option); } } } //全部左右移动select function select_all(one,two){ var sel1 = document.getElementById(one); var sel2 = document.getElementById(two); for (i = sel1.childNodes.length - 1; i >= 0; i--) { var option = sel1.childNodes[i]; sel1.removeChild(option); option.selected = false; sel2.appendChild(option); } } //动态增加按钮 var btnvalue = 0; function addbtn_btn() { var btn = document.createElement("input"); btn.type = "button"; btn.value = "按钮" +parseInt(btnvalue+1); btnvalue++; btn.onclick = function () { alert(this.value); } document.body.appendChild(btn); } //复制文本加上地址，firefox等游览器无效。 function mycopy() { var txt = clipboardData.getData('text'); txt += "本位来自lidy,原文地址：" + location.href; clipboardData.setData('text', txt); } //注册按钮倒计时 function disbtn() { var time = 5;//设置倒计时时间 var clear = setInterval(function () { var btn = document.getElementById("disbtn"); if (time <= 0) { clearInterval(clear);//需要清除setInterval btn.value = "同意"; btn.disabled = false; } else { btn.value = "请仔细阅读协议，请等待" + time + "秒"; time--; } }, 1000); }HTML代码：
<body onload="testul();testinput();testulonclick();disbtn()" oncopy="setTimeout('mycopy()',0)"> <ul id="testul"> <li>灰太狼</li> <li>灰太狼</li> <li>灰太狼</li> <li>灰太狼</li> <li>灰太狼</li> <li>灰太狼</li> </ul> <ul id="ulonclick"> <li>灰太狼</li> <li>灰太狼</li> <li>灰太狼</li> <li>灰太狼</li> <li>灰太狼</li> <li>灰太狼</li> </ul> <input type="text" /> </br> <input type="text" /> </br> <input type="text" /> </br> <input type="text" /> </br> <input type="button" value="testlogin" onclick="btn_login()"/> <!-- 登录框div --> <div id="logindiv" > <ul id="loginul"> <li ><span><a href="#" onclick="return login_close()">关闭</a></span></li> <li><span>用户名</span><input type="text" /></li> <li><span>密码 </span><input type="text" /></li> </ul> </div> <!-- checkbox --> <ul id="checkul"> <li><span>水果</span><input type="checkbox" /><span>蔬菜</span><input type="checkbox" /><span>酒水</span><input type="checkbox" /><span>米饭</span><input type="checkbox" /></li> <li><input type="button" value="全选" onclick="all_btn()"/><input type="button" value="全不选" onclick="allclose_btn()"/><input type="button" value="反选" onclick="re_btn()"/></li> </ul> <!-- select --> <ul> <li> <select multiple="multiple" id="selectleft"><option>水果</option><option>蔬菜</option><option>瓦房</option><option>酒水</option><option>米饭</option></select> <input type="button" value=">" onclick="select_btn('selectleft', 'selectright')" /><input type="button" value="<" onclick=" select_btn('selectright', 'selectleft')" /><input type="button" value=">>" onclick=" select_all('selectleft', 'selectright')" /><input type="button" value="<<" onclick=" select_all('selectright', 'selectleft')" /> <select multiple="multiple" id="selectright"></select> </li> </ul> <input type="button" value="动态生成" onclick="addbtn_btn()"/> </br> <!-- 注册按钮倒计时 --> <input type="button" value="" id="disbtn" disabled="disabled"/></body>TAG:
