实现功能:点击按钮后,该按钮60秒内不能再次点击,防止重复发送短信
① 按钮点击之后,会禁用按钮(disabled为true)
② 同时按钮里面的内容会有变化,注意button里面的内容通过innerHTML修改
③ 里面秒数是有变化的,因此需要用到定时器
④ 定义一个变量,在定时器里面,不断递减
⑤ 如果变量为0说明到了时间,需要停止定时器(否则会继续递减,出现负值),并且复原按钮初始状态。
<script> var btn = document.querySelector('button'); var time = 60; // 定义剩下的秒数 btn.addEventListener('click', function() { btn.disabled = true; var timer = setInterval(function() { if (time == 0) { // 清除定时器和复原按钮 clearInterval(timer); btn.disabled = false; btn.innerHTML = '发送'; time = 60; // 剩余时间需要从新开始 } btn.innerHTML = '还剩下' + time + '秒'; time--; }, 1000); }); </script>