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 获取验证码 倒计时
原文地址:https://www.cnblogs.com/xiaobaiv/p/9867121.html