JS按钮禁用倒计时

1.界面：首先要有一个文本框，旁边是按钮，点击时开始倒计时。

2.点击按钮后倒计时结束前无法继续点击按钮。

3.倒计时结束后，清除计时器，恢复对按钮能操作的功能，同时使倒计时的数从5秒重新开始以便点击后重新倒计时。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS重新提交倒计时</title>
    </head>
    <body>
        <input type="text" />&nbsp;<button id="btn">发送</button>
    </body>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            btn.disabled = true; //当点击后倒计时时候不能点击此按钮 
            var time = 5; //倒计时5秒 
            var timer = setInterval(ountDown, 1000); //设置定时器 
            
            // 倒计时
            function ountDown() {
                time--;
                if(time >= 0) {
                    btn.innerHTML = time + "s后重新发送";
                } else {
                    btn.innerHTML = "重新发送";
                    btn.disabled = false; //倒计时结束能够重新点击发送的按钮 
                    clearTimeout(timer); //清除定时器 
                    time = 5; //设置循环重新开始条件 
                }
            }
        }
    </script>
</html>

来源：https://www.cnblogs.com/suanshu/p/7347064.html

标签

按钮

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!