                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Tab选项卡切换效果

自己写的先撸为敬

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#faY{width:250px; height:50px; margin:20px;}
    #faY .faY_1{ width:125px; height:50px;float:left; background:red;}
    #faY .faY_1 input{ width:100px; height:40px; font-size:14px; background:#efefef;font-weight:800;color:#0ee;margin:5px 12px;}
    #faY .faY_2{ width:125px; height:50px;float:right; background:#ff0; text-align:center;line-height:50px;font-weight:800;color:#0ee;font-size:20px;display:none;}
</style>
<script type="text/javascript">
window.onload=function(){
   var send=document.getElementById('send'),
       send_1=document.getElementById('faY_2'),
       times=60,
       timer=null;
   send.onclick=function(){
            if (times>0&&times<60) {
             send.onclick=null;
            };
    clearInterval(timer);
    send.style.cssText="color:#fff";
    send_1.style.cssText="display:block";
    //send.onclick=null;
    timer=setInterval(function(){
    times--;
    if (times<=0) {
    send_1.style.cssText="display:none";
    send.style.cssText="color:#0eee";
    times=60;
    clearInterval(timer);

    };
    send_1.innerHTML=times+"秒后重试";
    },500);
   } 
}
</script>
</head>
<body>
    <div id="faY">
        <div>
           <input type="button" id="send" value="发送验证码">
        </div>
        <div id="faY_2">60秒后重试</div>
    </div>

</body>
</html>