星空网 > 软件开发 > Java

JS实现验证码倒计时效果

通常做注册页面时会有获取验证码按钮,然后点击后过60秒才能重新获取,比如现在项目中遇到的

JS实现验证码倒计时效果

然后点击后的样式,并且数字是递减的,到0时重新回到最初的状态(上图)。

JS实现验证码倒计时效果

首先构造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);    });

 

至此全部功能全部完毕。

 




原标题:JS实现验证码倒计时效果

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

家得宝:https://www.ikjzd.com/w/1570
菲律宾ICC认证:https://www.ikjzd.com/w/1571
鹰熊汇:https://www.ikjzd.com/w/1572
SABER认证:https://www.ikjzd.com/w/1572788220359073794
壹店宝:https://www.ikjzd.com/w/1572903113133039617
1sale:https://www.ikjzd.com/w/1572903116429762561
新喀里多尼亚/new caledonia:https://www.kjdsnews.com/a/1836448.html
美国对13家与俄罗斯相关的加密货币金融科技公司实施制裁:https://www.kjdsnews.com/a/1836449.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流