点击按钮倒计时
点击后 倒计时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 一次性定时器