JS倒计时两种种实现方式

封面图 • 2025-11-10 • JavaScript

在 JavaScript 中实现倒计时有两种常见的实现方式，分别是：

---

## ✅ **1. 使用 `setInterval` 实现倒计时**

这种方式是通过定时器不断更新当前时间，并计算剩余时间。

### 示例代码：
```javascript
function startCountdown(duration, display) {
    let timer = duration;
    const interval = setInterval(() => {
        let minutes = Math.floor(timer / 60);
        let seconds = timer % 60;

minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

display.textContent = minutes + ":" + seconds;

if (--timer < 0) {
            clearInterval(interval);
            display.textContent = "00:00";
            alert("倒计时结束！");
        }
    }, 1000);
}

// 调用示例：从 5 分钟开始倒计时
const countdownDisplay = document.getElementById('countdown');
startCountdown(5 * 60, countdownDisplay);
```

### HTML 示例：
```html
<div id="countdown">00:00</div>
```

---

## ✅ **2. 使用 `setTimeout` 实现倒计时（递归调用）**

这种方式是通过递归调用 `setTimeout` 来实现倒计时，适合需要更精确控制的场景。

### 示例代码：
```javascript
function startCountdown(duration, display) {
    let minutes = Math.floor(duration / 60);
    let seconds = duration % 60;

minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

display.textContent = minutes + ":" + seconds;

if (duration > 0) {
        setTimeout(() => {
            startCountdown(duration - 1, display);
        }, 1000);
    } else {
        alert("倒计时结束！");
    }
}

// 调用示例：从 5 分钟开始倒计时
const countdownDisplay = document.getElementById('countdown');
startCountdown(5 * 60, countdownDisplay);
```

---

## 📌 总结对比

| 方法 | 优点 | 缺点 |
|------|------|------|
| `setInterval` | 简单易懂，适合连续执行 | 容易出现时间偏差（比如页面刷新或跳转） |
| `setTimeout`（递归） | 更精确，适合复杂逻辑 | 需要递归调用，稍复杂 |

---

如果你有具体需求（比如倒计时到某个特定时间、支持暂停/继续等），也可以告诉我，我可以提供更高级的实现。