1. 程式人生 > 其它 >JavaScript案例:簡訊驗證碼倒計時

JavaScript案例:簡訊驗證碼倒計時

展示效果:

程式碼示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡訊驗證碼倒計時</title>
</head>
<body>
    <input type="text">
    <button>傳送</button>

    <script>
        var btn = document.getElementsByTagName("button")[0];
        // 剩餘的秒數
        var time = 20;

        btn.onclick = function () {
            // 按鈕變灰色,並且無法點選
            btn.disabled = true;
            // 倒計時
            var timer = setInterval(function () {
                if (time==0){
                    // 清除定時器
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerText = "傳送";
                    time = 20;
                }else {
                    btn.innerText = "還剩下" + time + "秒";
                    time--;
                }
            },1000)

        }
    </script>
</body>
</html>