通常做注册页面时会有获取验证码按钮,然后点击后过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); ???????});
至此全部功能全部完毕。