你的位置:首页 > Java教程

[Java教程]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);    });

 

至此全部功能全部完毕。