当前位置：首页 > JavaScript

js怎么实现分钟倒计时

2026-03-02 00:41:08JavaScript

实现分钟倒计时的方法

使用 `setInterval` 和日期计算

通过 setInterval 每秒更新倒计时，计算剩余时间并显示。

js怎么实现分钟倒计时

function startCountdown(minutes) {
  let seconds = minutes * 60;
  const countdownElement = document.getElementById('countdown');

  const timer = setInterval(() => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;

    countdownElement.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
    seconds--;

    if (seconds < 0) {
      clearInterval(timer);
      countdownElement.textContent = '时间到！';
    }
  }, 1000);
}

// 调用示例：开始5分钟倒计时
startCountdown(5);

使用 `Date` 对象精确倒计时

基于目标时间戳计算剩余时间，避免 setInterval 的误差累积。

js怎么实现分钟倒计时

function preciseCountdown(minutes) {
  const endTime = new Date();
  endTime.setMinutes(endTime.getMinutes() + minutes);
  const countdownElement = document.getElementById('countdown');

  const timer = setInterval(() => {
    const now = new Date();
    const remaining = Math.max(0, endTime - now);
    const mins = Math.floor(remaining / 60000);
    const secs = Math.floor((remaining % 60000) / 1000);

    countdownElement.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;

    if (remaining <= 0) {
      clearInterval(timer);
      countdownElement.textContent = '时间到！';
    }
  }, 1000);
}

// 调用示例：开始3分钟倒计时
preciseCountdown(3);

使用 `requestAnimationFrame` 实现平滑动画

适合需要动态效果的场景，如进度条动画。

function animateCountdown(minutes) {
  const duration = minutes * 60 * 1000;
  const startTime = Date.now();
  const countdownElement = document.getElementById('countdown');

  function update() {
    const elapsed = Date.now() - startTime;
    const remaining = Math.max(0, duration - elapsed);
    const mins = Math.floor(remaining / 60000);
    const secs = Math.floor((remaining % 60000) / 1000);

    countdownElement.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;

    if (remaining > 0) {
      requestAnimationFrame(update);
    } else {
      countdownElement.textContent = '时间到！';
    }
  }

  requestAnimationFrame(update);
}

// 调用示例：开始2分钟倒计时
animateCountdown(2);