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

小鱼儿 2024-03-27 18:44 77阅读 0赞

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

![format_png][]

e94cbabd25cfc7f3f53a50a235734c22.jpg

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

[format_png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/2d7cd749c64946748c72692e1ba9b12e.png