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" style="display:none;position:absolute;width:100%;height:100%;text-align:center;">
       <ul id="loginul">
       <li style="width:50px;margin-left:250px;"><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>