JS实现验证码倒计时效果

一般作注册页面时会有获取验证码按钮，而后点击后过60秒才能从新获取，好比如今项目中遇到的

而后点击后的样式，而且数字是递减的，到0时从新回到最初的状态（上图）。

首先构造HTML结构

<button class="getCode">获取验证码</button>

 

css就略了

JS实现：

var wait=60;
        function time(o){
            if (wait==0) {
                o.removeAttribute("disabled");    
                o.innerHTML="输入验证码";
                o.style.backgroundColor="#fe9900";
                wait=60;
            }else{
                o.setAttribute("disabled", true);
                o.innerHTML=wait+"秒后从新获取";
                o.style.backgroundColor="#8f8b8b";
                wait--;
                setTimeout(function(){
                    time(o)
                },1000)
            }
        }

最后点击按钮，调用time方法：

$(".getCode").click(function(){
            time(this);
        });

 

至此所有功能所有完毕。