JS 验证码60秒倒计时

时间：2015-09-29 01:12:31 阅读：427 评论：0 收藏：0 [点我收藏+]

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);  

})();

JS 验证码60秒倒计时

原文：http://www.cnblogs.com/NameBU/p/4845334.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)