快捷導(dǎo)航

javascript實現(xiàn)發(fā)送短信倒計時

更新時間：2021年09月30日 10:30:59 作者：qq_39111074

這篇文章主要為大家詳細介紹了javascript實現(xiàn)發(fā)送短信倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)發(fā)送短信倒計時的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)思路：

1、js獲取發(fā)送按鈕元素對象
2、設(shè)置一個發(fā)送間隔時間（全局變量）
3、給發(fā)送按鈕元素對象綁定點擊事件- - -onclick,
點擊事件處理程序：
① 點擊后俺按鈕設(shè)置成禁用—disabled：true;
② 使用定時函數(shù)，時間間隔為1秒，
定時函數(shù)調(diào)用的函數(shù)處理程序：
判斷時間是否為0
不為0- - -按鈕里的描述內(nèi)容變?yōu)椋菏Ｓ喽嗌倜?，且時間減1
為0- - -則恢復(fù)按鈕可以點擊狀態(tài)，里面的描述內(nèi)容恢復(fù)成“發(fā)送”

代碼示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>發(fā)送短信</title>
    <style>
        .box {
            width: 360px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box">
        手機號碼：<input type="number">
        <button>發(fā)送短信</button>
    </div>

    <script>
        var btn = document.querySelector('button');
        var time = 10;
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定時器和復(fù)原按鈕
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '發(fā)送短信';
                    time = 10;
                } else {
                    btn.innerHTML = '剩余' + time + '秒';
                    time--;
                }
            }, 1000);
        });
    </script>
</body>

</html>

頁面效果：