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>
posted @ 2022-05-06 15:11  猪腩飞了天  阅读(96)  评论(0)    收藏  举报