js代码实现点击按钮出现60秒倒计时
封面图
•
2025-09-24
•
JavaScript
189
0
0
0
你可以使用 JavaScript 实现一个点击按钮后开始 60 秒倒计时的功能。以下是一个完整的示例代码: ### ✅ HTML + JavaScript 示例 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>倒计时示例</title> </head> <body> <button id="countdownBtn">开始倒计时</button> <p id="timer">60</p> <script> const button = document.getElementById('countdownBtn'); const timerDisplay = document.getElementById('timer'); button.addEventListener('click', () => { let timeLeft = 60; // 禁用按钮,防止重复点击 button.disabled = true; // 显示倒计时 timerDisplay.textContent = timeLeft; const interval = setInterval(() => { timeLeft--; timerDisplay.textContent = timeLeft; if (timeLeft <= 0) { clearInterval(interval); button.disabled = false; timerDisplay.textContent = "时间到!"; } }, 1000); }); </script> </body> </html> ``` --- ### 📌 功能说明: - 点击按钮后,倒计时从 60 秒开始。 - 每秒更新一次显示。 - 倒计时结束后,显示“时间到!”并重新启用按钮。 --- 如果你希望倒计时在页面加载时就开始,或者有其他功能(比如重置、暂停等),也可以告诉我,我可以帮你扩展这个功能。
上一篇:
js实现网页防止被iframe框架嵌套及几种location.href的区别
下一篇:
prependTo() 方法在被选元素的开头(仍位于内部)插入指定内容
标题录入,一次不能超过6条
返回顶部
留言
留言
评论