JavaScript實現獲取驗證碼倒計時效果


要求:

點擊按鈕后,該按鈕60秒之內不能再次點擊,防止重復發送短信

實現思路:

  1. 按鈕點擊之后,禁用disabledtrue
  2. 同時按鈕里面的內容會變化,button里面的內容通過innerHTML修改
  3. 里面秒數是有變化的,因此需要用到定時器
  4. 定義一個變量,在定時器里面,不斷遞減
  5. 如果變量為0說明時間到了,需要停止定時器,重新恢復變量,並且復原按鈕初始狀態

代碼實現:

<body></body>內容:

手機號碼: <input type="text"> <button>發送</button>
<script>
    // 按鈕點擊之后,會禁用 disabled 為true 
    // 同時按鈕里面的內容會變化, 注意 button 里面的內容通過 innerHTML修改
    // 里面秒數是有變化的,因此需要用到定時器
    // 定義一個變量,在定時器里面,不斷遞減
    // 如果變量為0 說明到了時間,我們需要停止定時器,並且復原按鈕初始狀態
    var btn = document.querySelector('button');
    var time = 3; // 定義剩下的秒數
    btn.addEventListener('click', function() {
        btn.disabled = true;
        var timer = setInterval(function() {
            if (time == 0) {
                // 清除定時器和復原按鈕
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '發送';
                time = 3; // 重新賦值時間變量
            } else {
                btn.innerHTML = time + '秒后可再次發送';
                time--;
            }
        }, 1000);
    });
</script>

實現效果:

點擊發送之后,按鈕禁用,並出現倒計時。設置為3秒倒計時。


3秒過后,按鈕復原,可以重新點擊發送


免責聲明!

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



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