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

        });

 

至此全部功能全部完毕。