当前位置：首页 > JavaScript

js实现倒计时js

2026-02-02 12:24:24JavaScript

使用 `setInterval` 实现倒计时

通过 setInterval 每隔一秒更新剩余时间，并在倒计时结束时清除定时器。

function countdown(seconds, callback) {
  const timer = setInterval(() => {
    seconds--;
    if (seconds <= 0) {
      clearInterval(timer);
      callback();
    }
    console.log(`剩余时间: ${seconds}秒`);
  }, 1000);
}

// 示例用法
countdown(10, () => {
  console.log('倒计时结束');
});

使用 `setTimeout` 递归实现倒计时

通过递归调用 setTimeout 实现倒计时，避免 setInterval 可能带来的时间误差。

function countdown(seconds, callback) {
  console.log(`剩余时间: ${seconds}秒`);
  if (seconds <= 0) {
    callback();
    return;
  }
  setTimeout(() => {
    countdown(seconds - 1, callback);
  }, 1000);
}

// 示例用法
countdown(10, () => {
  console.log('倒计时结束');
});

显示格式化的倒计时时间

将剩余时间格式化为 HH:MM:SS 形式，适用于显示更友好的倒计时界面。

function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

function countdown(seconds, callback) {
  console.log(`剩余时间: ${formatTime(seconds)}`);
  if (seconds <= 0) {
    callback();
    return;
  }
  setTimeout(() => {
    countdown(seconds - 1, callback);
  }, 1000);
}

// 示例用法
countdown(3600, () => {
  console.log('倒计时结束');
});

在 HTML 页面中显示倒计时

将倒计时显示在网页的某个元素中，适用于前端开发。

<div id="countdown"></div>
<script>
  function countdown(seconds, elementId, callback) {
    const element = document.getElementById(elementId);
    element.textContent = `剩余时间: ${seconds}秒`;
    if (seconds <= 0) {
      callback();
      return;
    }
    setTimeout(() => {
      countdown(seconds - 1, elementId, callback);
    }, 1000);
  }

  // 示例用法
  countdown(10, 'countdown', () => {
    console.log('倒计时结束');
  });
</script>

使用 `requestAnimationFrame` 实现高精度倒计时

适用于需要高精度计时的情况，如动画或游戏开发。

function countdown(seconds, callback) {
  const startTime = performance.now();
  function update(currentTime) {
    const elapsed = (currentTime - startTime) / 1000;
    const remaining = Math.max(0, seconds - elapsed);
    console.log(`剩余时间: ${remaining.toFixed(1)}秒`);
    if (remaining <= 0) {
      callback();
      return;
    }
    requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

// 示例用法
countdown(10, () => {
  console.log('倒计时结束');
});

js实现倒计时js