第三章函数 - 示例：登录注册切换 - 《Javascript 新手入门 - 从0到1教程》

<body>
<div class="whole">
    <ul>
        <li class="current">登录</li>
        <li>注册</li>
    </ul>
     <div class="content">
                  <div>
                        <input type="text" placeholder="账号">
                        <input type="password" placeholder="密码">
                        <button>登录</button>
                  </div>
                  <div>
                         <input type="text" placeholder="账号">
                         <input type="text"  placeholder="输入验证码">
                         <button id="btn" onclick="go()">发送验证码</button>
                  </div>
     </div>
</div>
<script>
var lis=document.querySelectorAll("ul li");
var divs=document.querySelectorAll(".content div");
var btn=document.getElementById("btn");
for(var i=0 ;i<lis.length;i++){
        lis[i].index=i;
        lis[i].onclick=function(){
            for(var i=0;i<lis.length;i++){
                  lis[i].className="";
            }
            this.className="current";
            for(var i=0;i<divs.length;i++){
                divs[i].style.display="none";
            }
            divs[this.index].style.display="block"
        }
}
num=6;
function go(){
    setTimeout(function (){
            num--;
            if(num>=0){
                btn.innerHTML=num;
                btn.disabled=true
                btn.style.color="gray"
                btn.style.backgroundColor="#aaaa38"
                go();
            }
            else {
                num=6;
                btn.innerHTML="发送验证码"
                clearInterval();
                btn.disabled=false;
                btn.style.color="white"
                btn.style.backgroundColor=" #dada3a"
            }
    },1000)
}
</script>
</body>
</html>