首页 > 编程 > JavaScript > 正文

JS 实现获取验证码 倒计时功能

2019-11-19 12:37:15
字体:
来源:转载
供稿:网友

setInterval 一个定时器搞定

<style>button{  background: #45BCF9;  color: #fff;  padding: 4px 10px;  border: none;  outline: none;  cursor: pointer;}button:hover{  background: #00a8fe;}button.disabled{  background: #000;  cursor: auto;}button.disabled:hover{  background: #000;}</style><button type="button" onclick="fn()">获取验证码</button><script>function fn(){  var oBtn = document.getElementsByTagName('button')[0];  var time = 60;  var timer = null;  oBtn.innerHTML = time + '秒后重新发送';  oBtn.setAttribute('disabled', 'disabled');  // 禁用按钮  oBtn.setAttribute('class', 'disabled');   // 添加class 按钮样式变灰  timer = setInterval(function(){    // 定时器到底了 兄弟们回家啦    if(time == 1){      clearInterval(timer);             oBtn.innerHTML = '获取验证码';        oBtn.removeAttribute('disabled');       oBtn.removeAttribute('class');      }else{      time--;      oBtn.innerHTML = time + '秒后重新发送';    }  }, 1000)}</script>

总结

以上所述是小编给大家介绍的JS 实现获取验证码 倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表