JS倒计时两种种实现方式
2025-05-08 23:58
JavaScript
248
0
0
0
标题录入
封面图
在 JavaScript 中,实现倒计时的方式有多种,以下是两种常见的实现方式: ### 方法一:使用 `setInterval` 实现倒计时 这种方法利用 `setInterval` 定时执行一个函数来更新倒计时的值。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时 - setInterval</title> </head> <body> <div id="countdown">10</div> <script> let countdown = 10; // 倒计时初始值 const countdownElement = document.getElementById('countdown'); const intervalId = setInterval(() => { countdown--; if (countdown >= 0) { countdownElement.textContent = countdown; } else { clearInterval(intervalId); // 清除定时器 countdownElement.textContent = "时间到!"; } }, 1000); </script> </body> </html> ``` #### 解释: 1. `countdown` 是倒计时的初始值。 2. 使用 `setInterval` 每隔 1 秒(1000 毫秒)执行一次回调函数。 3. 在回调函数中,`countdown` 减少 1,并将当前值显示在页面上。 4. 当 `countdown` 小于 0 时,清除定时器并显示 "时间到!"。 --- ### 方法二:使用 `setTimeout` 实现递归倒计时 这种方法通过递归调用 `setTimeout` 来实现倒计时。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时 - setTimeout</title> </head> <body> <div id="countdown">10</div> <script> let countdown = 10; // 倒计时初始值 const countdownElement = document.getElementById('countdown'); function updateCountdown() { countdownElement.textContent = countdown; countdown--; if (countdown >= 0) { setTimeout(updateCountdown, 1000); // 每隔 1 秒递归调用 } else { countdownElement.textContent = "时间到!"; } } updateCountdown(); </script> </body> </html> ``` #### 解释: 1. `updateCountdown` 函数负责更新倒计时值并检查是否结束。 2. 每次调用 `updateCountdown` 时,先更新倒计时值,然后递归调用自身,间隔为 1 秒。 3. 当 `countdown` 小于 0 时,停止递归并显示 "时间到!"。 --- ### 总结: - **`setInterval`** 更适合简单的定时任务,代码结构简单。 - **`setTimeout`** 更灵活,可以更好地控制递归逻辑,避免长时间运行导致的问题。 根据具体需求选择合适的方法即可。
上一篇:
git remote add origin 使用
下一篇:
【转义字符】HTML 字符实体< >: &等
标题录入,一次不能超过6条
很多事情没有意义,为什么还要坚持去做?
T:0.013605s,M:126.7 KB
返回顶部
留言
留言
评论