首页html页面点击按钮，按钮在60秒内不能再按，并且倒计时显示在按钮上，完整的html代码

html页面点击按钮，按钮在60秒内不能再按，并且倒计时显示在按钮上，完整的html代码

时间: 2023-06-19 19:07:28 浏览: 138

以下是一个简单的HTML代码，实现点击按钮后禁用按钮并在按钮上显示倒计时： ```html <!DOCTYPE html> <html> <head> <title>禁用按钮并显示倒计时</title> <script type="text/javascript"> var count = 60; // 设置倒计时时间 function disableBtn(btn) { btn.disabled = true; // 禁用按钮 btn.value = "重新发送 (" + count + "s)"; // 显示倒计时 setTimeout(function() { if (count > 0) { count--; disableBtn(btn); // 继续倒计时 } else { btn.disabled = false; // 倒计时结束，启用按钮 btn.value = "发送验证码"; count = 60; // 重置倒计时时间 } }, 1000); } </script> </head> <body> <button onclick="disableBtn(this)">发送验证码</button> </body> </html> ``` 这段代码中，通过JavaScript实现了点击按钮后禁用按钮并显示倒计时。其中，`count`变量用于设置倒计时时间，`disableBtn`函数用于禁用按钮和显示倒计时，并通过`setTimeout`函数实现了倒计时功能。在HTML中，通过`onclick`事件触发`disableBtn`函数。

阅读全文