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

至此全部功能全部完毕。