按鈕:點擊發送短信按鈕60秒內不能再次點擊的功能


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM