当前位置：首页 > JavaScript

js实现倒计时

2026-01-08 12:24:10JavaScript

实现倒计时的基本方法

使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式：

使用 setInterval 实现倒计时

js实现倒计时

function countDown(targetTime) {
  const timer = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetTime - now;

    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);

    console.log(`${days}d ${hours}h ${minutes}m ${seconds}s`);

    if (distance < 0) {
      clearInterval(timer);
      console.log('倒计时结束');
    }
  }, 1000);
}

// 示例：倒计时到 2023-12-31 23:59:59
const targetDate = new Date('2023-12-31T23:59:59').getTime();
countDown(targetDate);

使用 setTimeout 实现递归倒计时

function countDownRecursive(targetTime) {
  const now = new Date().getTime();
  const distance = targetTime - now;

  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);

  console.log(`${days}d ${hours}h ${minutes}m ${seconds}s`);

  if (distance > 0) {
    setTimeout(() => countDownRecursive(targetTime), 1000);
  } else {
    console.log('倒计时结束');
  }
}

const targetDate = new Date('2023-12-31T23:59:59').getTime();
countDownRecursive(targetDate);

格式化倒计时显示

为了更友好地显示倒计时，可以封装一个格式化函数：

js实现倒计时

function formatTime(days, hours, minutes, seconds) {
  return `${days}天 ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

function countDownFormatted(targetTime, elementId) {
  const timer = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetTime - now;

    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);

    document.getElementById(elementId).innerHTML = formatTime(days, hours, minutes, seconds);

    if (distance < 0) {
      clearInterval(timer);
      document.getElementById(elementId).innerHTML = '已结束';
    }
  }, 1000);
}

// HTML 中需要有 <div id="countdown"></div>
const targetDate = new Date('2023-12-31T23:59:59').getTime();
countDownFormatted(targetDate, 'countdown');

处理时区问题

如果需要处理时区问题，可以使用 getTimezoneOffset 进行调整：

const targetDate = new Date('2023-12-31T23:59:59');
const offset = targetDate.getTimezoneOffset() * 60000;
const adjustedTime = targetDate.getTime() - offset;
countDown(adjustedTime);

性能优化建议

对于长时间运行的倒计时，建议使用 requestAnimationFrame 替代 setInterval 以提高性能：

function countDownOptimized(targetTime, elementId) {
  function update() {
    const now = new Date().getTime();
    const distance = targetTime - now;

    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);

    document.getElementById(elementId).innerHTML = formatTime(days, hours, minutes, seconds);

    if (distance > 0) {
      requestAnimationFrame(update);
    } else {
      document.getElementById(elementId).innerHTML = '已结束';
    }
  }

  requestAnimationFrame(update);
}

以上方法涵盖了 JavaScript 实现倒计时的基本功能、格式化显示、时区处理和性能优化等方面，可以根据实际需求选择适合的实现方式。