提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript案例4——按钮禁用、获取验证码、倒计时

JavaScript案例 获取 按钮 验证码 禁用 倒计时
2023-09-14 09:04:09 时间

一、案例描述

模拟手机发送验证码的效果，点击按钮，倒计时开始，倒计时过程中不允许再次点击。等待变成0之后再恢复成原始模样。

二、案例效果演示

请添加图片描述

三、案例局部代码

HTML代码：
  <button onclick="sendCode()" id="sendBtn">发送验证码</button>
js代码：
<script type="text/javascript">
// 等待时长
    var waitTime = 5;
    // 存储定时器
    var t;

    function sendCode() {
        t = setInterval(decTime, 1000);
    }

    function decTime() {
        // 获取按钮元素
        var btn = document.getElementById('sendBtn');
        // 设置禁用
        btn.disabled = true;
        // 等待时间逐秒减一
        // waitTime = waitTime - 1;
        // 或者
        waitTime--;
        // 将等待时间显示到按钮上
        btn.innerText = waitTime + 'S后重新获取';
        // 当时间到 0 时：
        if (waitTime == 0) {
            // 清除定时器
            clearInterval(t);
            // 恢复按钮为可使用
            btn.disabled = false;
            // 改变按钮的文字
            btn.innerText = '发送验证码';
            // 刷新页面，这里是为了彻底清除定时器，否则下次点击时，仍然继续往下减，出现负数
            location.reload();
        }
    }
</script>

四、案例整体代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>按钮禁用</title>
</head>

<body>
    <button onclick="sendCode()" id="sendBtn">发送验证码</button>
    <script type="text/javascript">
        // 等待时长
        var waitTime = 5;
        // 存储定时器
        var t;

        function sendCode() {
            t = setInterval(decTime, 1000);
        }

        function decTime() {
            // 获取按钮元素
            var btn = document.getElementById('sendBtn');
            // 设置禁用
            btn.disabled = true;
            // 等待时间逐秒减一
            // waitTime = waitTime - 1;
            // 或者
            waitTime--;
            // 将等待时间显示到按钮上
            btn.innerText = waitTime + 'S后重新获取';
            // 当时间到 0 时：
            if (waitTime == 0) {
                // 清除定时器
                clearInterval(t);
                // 恢复按钮为可使用
                btn.disabled = false;
                // 改变按钮的文字
                btn.innerText = '发送验证码';
                // 刷新页面，这里是为了彻底清除定时器，否则下次点击时，仍然继续往下减，出现负数
                location.reload();
            }
        }
    </script>
</body>

</html>

五、总结

如果想从60s开始倒计时，改一下等待时长即可。

相关文章