当前位置：首页 > JavaScript

js实现倒进时

2026-04-07 09:58:03JavaScript

实现倒计时的方法

使用JavaScript实现倒计时可以通过多种方式完成，以下是几种常见的方法：

js实现倒进时

使用`setInterval`实现倒计时

function countdown(seconds) {
  let timer = setInterval(() => {
    console.log(seconds);
    seconds--;
    if (seconds < 0) {
      clearInterval(timer);
      console.log("倒计时结束");
    }
  }, 1000);
}
countdown(10);

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

function countdown(seconds) {
  console.log(seconds);
  if (seconds > 0) {
    setTimeout(() => countdown(seconds - 1), 1000);
  } else {
    console.log("倒计时结束");
  }
}
countdown(10);

带页面显示的倒计时

<div id="countdown">10</div>
<script>
  function updateCountdown(seconds) {
    document.getElementById("countdown").textContent = seconds;
    if (seconds > 0) {
      setTimeout(() => updateCountdown(seconds - 1), 1000);
    }
  }
  updateCountdown(10);
</script>

带格式化时间的倒计时

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

function countdown(totalSeconds) {
  console.log(formatTime(totalSeconds));
  if (totalSeconds > 0) {
    setTimeout(() => countdown(totalSeconds - 1), 1000);
  }
}
countdown(125);  // 02:05开始

精确到毫秒的倒计时

function preciseCountdown(endTime) {
  const timer = setInterval(() => {
    const now = new Date().getTime();
    const distance = endTime - now;
    if (distance <= 0) {
      clearInterval(timer);
      console.log("倒计时结束");
      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);
    console.log(`${days}d ${hours}h ${minutes}m ${seconds}s`);
  }, 1000);
}

const endDate = new Date();
endDate.setDate(endDate.getDate() + 1);  // 设置为明天此时
preciseCountdown(endDate.getTime());