点击按钮倒计时


点击后 倒计时5秒, 5秒后恢复。

  <input type="button" value="获取验证码"></button> 
 var btn = document.querySelector('input');         // 点击事件 btn.onclick = function () { //点击按钮时,按钮禁用
            btn.disabled = true; // 倒计时5秒
            var index = 5; // 按钮文字为获取验证码(5)
            btn.value = `获取验证码 (${index}) `; // 定时器,延迟 1s
            var timer = setInterval(function () { // 倒计时 --,值也跟着改变
                index--; btn.value = `获取验证码 (${index}) `; // 当倒计时等等为0时
                if (index == 0) { // 停止计时
 clearInterval(timer); // 按钮禁用取消
                btn.disabled = false; // 将文字值重置为获取验证码
                btn.value = '获取验证码'; } }, 1000)        
              //setInterval 一次性定时器


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM