JS 验证码60秒倒计时

本文转载自查看原文 2015-09-29 00:04 2347 JavaScript/ 倒计时

html代码：

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>获取验证码倒计时</title>
 4 <style type="text/css">
 5 a{text-decoration: none;color:#fff;}
 6 .box{width:330px;height:200px;}
 7 .btn{display: inline-block;width:120px;height:22px;text-align:center;line-height: 22px; }
 8 .btn-on{background-color: #91C2EC;}
 9 .btn-off{background-color: #B5B7BA;}
10 </style>
11 </head>
12     
13 <body>
14     <div class="box">
15         <input type="text">
16         <a id="btn" class="btn btn-on" href="javaScript:void(0);">获取验证码</a>
17     </div>
18 </body>

JS代码：

(function(){
    var btn = document.getElementById("btn");
    var handler = function(){
        doClick();
        removeEvent(btn,'click',handler);//取消绑定该事件
    }
    
    function addEvent(obj,type,handler){
        if(obj.addEventListener){
            obj.addEventListener(type,handler,false);
        }else if(obj.attachEvent){
            obj.attachEvent('on'+type,handler);
        }
    }

    function removeEvent(obj,type,handler){
        if(obj.removeEventListener){
            obj.removeEventListener(type,handler,false);
        }else if(obj.detachEvent){
            obj.detachEvent("on"+type,handler);
        }
    }

    function doClick(){
        removeClass(btn,'btn-on');
        addClass(btn,'btn-off');
        btn.innerHTML="60s后重新获取";
        var clickTime = new Date().getTime();
        var Timer = setInterval(function(){
            var nowTime = new Date().getTime();
            var    second  = Math.ceil(60-(nowTime-clickTime)/1000);
            if(second>0){
                btn.innerHTML = second+"s后重新获取";
            }else{
                clearInterval(Timer);
                removeClass(btn,'btn-off');
                addClass(btn,'btn-on');
                btn.innerHTML = "获取验证码";
                addEvent(btn,"click",handler);
            }
        },1000);
    }


    function hasClass(obj, cls) {  
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
    }        
    function addClass(obj, cls) {  
        if (!hasClass(obj, cls)) obj.className += " " + cls;  
    }        
    function removeClass(obj, cls) {  
        if (hasClass(obj, cls)) {  
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
            obj.className = obj.className.replace(reg, ' ');  
        }  
    }
    
    addEvent(btn,"click",handler);  

})();

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 点击获取验证码（倒计时60秒） uni验证码60秒倒计时 node.js发送短信验证码(附带60秒倒计时插件) vue实现验证码倒计时60秒的具体代码 jQuery实现发送短信验证码后60秒倒计时 jQuery实现发送短信验证码后60秒倒计时 jQuery实现发送验证码倒计时60秒 vue发送验证码60秒倒计时发送短信验证码后60秒倒计时前端常用库-发送短信验证码倒计时60秒