当前位置：首页 > JavaScript

js 实现倒计时

2026-02-28 17:40:46JavaScript

使用 JavaScript 实现倒计时

方法一：使用 `setInterval` 实现基础倒计时

通过 setInterval 定期更新显示剩余时间，适用于简单的倒计时场景。

function startCountdown(seconds, elementId) {
  const countdownElement = document.getElementById(elementId);
  let remainingSeconds = seconds;

  const timer = setInterval(() => {
    remainingSeconds--;
    countdownElement.textContent = `${remainingSeconds}秒`;

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

// 调用示例：在HTML中需有id为"countdown"的元素
startCountdown(10, 'countdown');

方法二：支持天、时、分、秒的完整倒计时

扩展基础功能，将总秒数转换为更易读的格式。

function formatTime(seconds) {
  const days = Math.floor(seconds / (3600 * 24));
  const hours = Math.floor((seconds % (3600 * 24)) / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;

  return `${days}天 ${hours}时 ${minutes}分 ${secs}秒`;
}

function startFullCountdown(totalSeconds, elementId) {
  const element = document.getElementById(elementId);
  let remaining = totalSeconds;

  const timer = setInterval(() => {
    remaining--;
    element.textContent = formatTime(remaining);

    if (remaining <= 0) {
      clearInterval(timer);
      element.textContent = '倒计时结束';
    }
  }, 1000);
}

// 调用示例
startFullCountdown(86465, 'fullCountdown'); // 1天1小时1分5秒

方法三：高性能倒计时（减少误差）

使用 Date 对象计算时间差，避免 setInterval 的累积误差。

function startPreciseCountdown(endTime, elementId) {
  const element = document.getElementById(elementId);
  const end = new Date(endTime).getTime();

  function update() {
    const now = new Date().getTime();
    const distance = end - now;

    if (distance <= 0) {
      element.textContent = '时间到！';
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    element.textContent = `${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
    requestAnimationFrame(update);
  }

  update();
}

// 调用示例：传入未来时间戳或日期字符串
startPreciseCountdown('2024-12-31 23:59:59', 'preciseCountdown');

方法四：暂停与恢复功能

添加控制按钮实现倒计时的暂停和继续。

<div id="controlledCountdown">60秒</div>
<button id="pauseBtn">暂停</button>
<button id="resumeBtn">继续</button>

<script>
  let timer;
  let remaining = 60;
  const element = document.getElementById('controlledCountdown');
  const pauseBtn = document.getElementById('pauseBtn');
  const resumeBtn = document.getElementById('resumeBtn');

  function updateDisplay() {
    element.textContent = `${remaining}秒`;
  }

  function startTimer() {
    timer = setInterval(() => {
      remaining--;
      updateDisplay();

      if (remaining <= 0) {
        clearInterval(timer);
        element.textContent = '完成';
      }
    }, 1000);
  }

  pauseBtn.addEventListener('click', () => {
    clearInterval(timer);
  });

  resumeBtn.addEventListener('click', () => {
    startTimer();
  });

  startTimer(); // 初始启动
</script>