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>

相关阅读:
iOS小技能：SKU视图搭建
网络隔离后不同部门如何实现不同的跨网传输审批？
阿尔法狗的算法解析-增强学习和蒙特卡洛树搜索算法
分库分表真实案例，扩容10倍容量
(待完善)python学习参考手册
进程同步与互斥
仓库管理无纸化,WMS仓库管理软件+条形码技术
Day692.Tomcat如何隔离Web应用 -深入拆解 Tomcat & Jetty
软件项目管理判断题
【0233】PG内核通过PG_TRY()、PG_CATCH()、PG_END_TRY()实现异常抛出、捕获

原文地址：https://blog.csdn.net/jun_tong/article/details/133940374