實現功能:點擊按鈕后,該按鈕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>