当前位置：首页 > JavaScript

js实现倒进时

2026-03-15 16:33:20JavaScript

JavaScript 实现倒计时

在 JavaScript 中实现倒计时功能通常涉及使用 setInterval 或 setTimeout 定时器函数，结合日期计算或简单的数字递减逻辑。以下是几种常见的实现方式：

js实现倒进时

基于日期差的倒计时

计算目标时间与当前时间的差值，动态更新剩余时间：

js实现倒进时

function countdown(targetDate, displayElement) {
  const targetTime = new Date(targetDate).getTime();

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

    if (distance <= 0) {
      clearInterval(timer);
      displayElement.innerHTML = "倒计时结束";
      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);

    displayElement.innerHTML = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
  }, 1000);
}

// 调用示例
countdown("2024-12-31T23:59:59", document.getElementById("countdown"));

简单数字递减倒计时

适用于固定秒数的倒计时（如 60 秒）：

function simpleCountdown(seconds, displayElement) {
  let remaining = seconds;

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

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

// 调用示例
simpleCountdown(60, document.getElementById("timer"));

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

适用于需要高精度更新的场景（如动画）：

function highPrecisionCountdown(endTime, callback) {
  let startTime = performance.now();

  function update() {
    const elapsed = performance.now() - startTime;
    const remaining = Math.max(0, endTime - elapsed);

    callback(remaining);

    if (remaining > 0) {
      requestAnimationFrame(update);
    }
  }

  update();
}

// 调用示例
highPrecisionCountdown(5000, (remaining) => {
  console.log((remaining / 1000).toFixed(2) + "秒剩余");
});