首页handler实现倒计时

handler实现倒计时

时间: 2024-03-08 08:18:15 浏览: 63

可以使用JavaScript中的`setTimeout()`函数来实现倒计时，同时使用一个`handler`来更新倒计时的时间显示。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>倒计时</title> </head> <body> <h1 id="countdown">10</h1> <button onclick="startCountdown()">开始倒计时</button> <script> let countdown = document.getElementById("countdown"); let timeLeft = 10; let timerHandler; function startCountdown() { timerHandler = setInterval(updateCountdown, 1000); } function updateCountdown() { if (timeLeft > 0) { timeLeft--; countdown.innerHTML = timeLeft; } else { clearInterval(timerHandler); alert("倒计时结束！"); } } </script> </body> </html> ``` 在这段代码中，我们首先在页面中创建了一个`h1`元素用于显示倒计时的时间。当用户点击“开始倒计时”按钮时，我们调用了`startCountdown()`函数，该函数使用`setInterval()`函数每隔1秒钟调用一次`updateCountdown()`函数。`updateCountdown()`函数每次将时间减1，并更新显示在页面中的时间。当时间倒计时结束时，我们清除定时器并弹出一个提示框告知用户倒计时结束。

阅读全文