欧美精品免费观看二区/在线观看av/粉嫩国产精品14xxxxx/亚洲精品视频在线观看免费

手機驗證碼倒計時的實現
發布時間：2023-10-08

    文章目錄
    手機驗證碼倒計時的實現
    1.HTML代碼
    2.第一種方法實現
    普通點擊事件實現驗證碼倒計時
    3.第二種方法實現
    監聽事件實現驗證碼倒計時
    總結


    手機驗證碼倒計時的實現
    1.HTML代碼

    <head>
    <style>
        #btn {
            padding: 30px 50px;
        }
    </style>
</head>

<body>
    <!-- 在靜態頁面中寫入一個button按鈕 -->
    <button id="btn">獲取手機驗證碼</button>
</body>



    2.第一種方法實現
    普通點擊事件實現驗證碼倒計時

    <script>
    // 普通點擊事件實現驗證碼倒計時
    // 獲取元素
    var btn = document.getElementById('btn')
    // 定義時間6秒
    var n = 6
    // 綁定點擊事件
    btn.onclick = function () {
        // 定時器 ：setInterval (回調函數，時間間隔)
        var timer = setInterval(function () {
            // 時間遞減
            n--
            // 獲取驗證碼過程
            btn.innerHTML = '請耐心等待(' + n + ')'
            // 按鈕禁用
            btn.disabled = true
            // 當時間減到0時，獲取驗證碼失敗，需要點擊按鈕重新發送
            if (n < 0) {
                btn.innerHTML = '重新發送'
                // 當時間減到0時，按鈕禁用取消，可以點擊按鈕
                btn.disabled = false
                // 將時間重新定義到60秒，重新發送驗證碼
                n = 6
                // 在定時器完成一次后需要清除定時器，否則會一直執行該代碼，影響下一次執行的代碼
                clearInterval(timer)
            }
            // 1000 時間間隔，單位是毫秒
        } 1000)
    }
</script>



    3.第二種方法實現
    監聽事件實現驗證碼倒計時

    <script>
    // 監聽事件實現驗證碼倒計時
    // 獲取元素
    var btn = document.getElementById('btn')
    // 事件處理程序
    function countdown() {
        var n = 6;
        // 按鈕禁用
        btn.disabled = true;
        // 定時器 ：setInterval (回調函數，時間間隔)
        var timer = setInterval(function () {
            btn.innerHTML = '請耐心等待(' + n + ')';
            n--;
            if (n < 0) {
                // 清除定時器
                clearInterval(timer);
                btn.innerHTML = '重新發送';
                // 按鈕禁用取消
                btn.disabled = false;
            }
        } 1000);
    }
    // 添加監聽事件  事件類型 點擊:'click' 
    btn.addEventListener('click' countdown);
</script>



    總結
    監聽事件的代碼將定時器函數定義為獨立的函數，增強代碼的可讀性和可維護性。當按鈕被點擊時，調用countdown函數開始倒計時，倒計時結束后重新啟用按鈕。同時，使用addEventListener方法代替了onclick屬性，從而提高代碼的可擴展性。