html 按钮点击倒计时，限制不可点击

jun_tong2023-10-21 22:40

html 按钮点击倒计时，限制不可点击

e94cbabd25cfc7f3f53a50a235734c22.jpg

复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>

        <!-- VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV -->
        <!-- VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV -->
        <input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" />
        <script type="text/javascript">
            var clock = '';
            var nums = 3;
            var btn;

            function sendCode(thisBtn) {
                btn = thisBtn;
                btn.disabled = true; //将按钮置为不可点击
                btn.value = nums + '秒后可重新获取';
                clock = setInterval(doLoop, 1000); //一秒执行一次
            }

            function doLoop() {
                nums--;
                if (nums > 0) {
                    btn.value = nums + '秒后可重新获取';
                } else {
                    clearInterval(clock); //清除js定时器
                    btn.disabled = false;
                    btn.value = '点击发送验证码';
                    nums = 3; //重置时间
                }
            }
        </script>
        <!-- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA -->
        <!-- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA -->

    </body>

</html>