当前位置：首页 > JavaScript

js实现倒数

2026-02-02 01:33:16JavaScript

实现倒数功能的 JavaScript 方法

使用 setInterval 实现动态倒数

通过 setInterval 设置定时器，每秒更新显示剩余时间。适用于需要实时显示倒计时的场景。

function countdown(seconds) {
  let remaining = seconds;
  const timer = setInterval(() => {
    console.log(remaining);
    remaining--;
    if (remaining < 0) {
      clearInterval(timer);
      console.log("Countdown finished!");
    }
  }, 1000);
}
countdown(10); // 从10开始倒数

使用 setTimeout 实现递归倒数

通过递归调用 setTimeout 实现倒计时。相比 setInterval 更精确，避免定时器堆积问题。

js实现倒数

function countdown(seconds) {
  console.log(seconds);
  if (seconds > 0) {
    setTimeout(() => countdown(seconds - 1), 1000);
  } else {
    console.log("Countdown finished!");
  }
}
countdown(10);

添加日期计算的精确倒数

适用于需要显示天、小时、分钟和秒的场景，基于目标日期计算剩余时间。

js实现倒数

function countdownToDate(targetDate) {
  const interval = setInterval(() => {
    const now = new Date();
    const diff = targetDate - now;

    if (diff <= 0) {
      clearInterval(interval);
      console.log("Countdown finished!");
      return;
    }

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

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

const targetDate = new Date("2024-12-31T23:59:59");
countdownToDate(targetDate);

使用 Promise 实现异步倒数

通过 Promise 封装倒计时逻辑，便于在异步流程中使用。

function asyncCountdown(seconds) {
  return new Promise((resolve) => {
    const timer = setInterval(() => {
      console.log(seconds);
      seconds--;
      if (seconds < 0) {
        clearInterval(timer);
        resolve("Countdown finished!");
      }
    }, 1000);
  });
}

asyncCountdown(5).then(message => console.log(message));

注意事项