当前位置：首页 > JavaScript

js实现倒计时js

2026-03-15 12:30:32JavaScript

实现倒计时的基本方法

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

基于固定时间的倒计时

通过设定目标时间与当前时间的差值，计算剩余的天、小时、分钟和秒。

function countdown(targetDate, elementId) {
  const timer = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetDate - 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 = 
      `${days}d ${hours}h ${minutes}m ${seconds}s`;

    if (distance < 0) {
      clearInterval(timer);
      document.getElementById(elementId).innerHTML = "EXPIRED";
    }
  }, 1000);
}

// 示例：倒计时到2024年12月31日
countdown(new Date("2024-12-31").getTime(), "countdown");

动态倒计时（从指定秒数开始）

适用于从固定秒数（如60秒）开始的倒计时场景。

function startCountdown(seconds, elementId) {
  let counter = seconds;
  const interval = setInterval(() => {
    document.getElementById(elementId).textContent = counter;
    counter--;
    if (counter < 0) {
      clearInterval(interval);
      document.getElementById(elementId).textContent = "Time's up!";
    }
  }, 1000);
}

// 示例：从60秒开始倒计时
startCountdown(60, "timer");

带暂停和继续功能的倒计时

通过控制定时器的启停实现交互性更强的倒计时。

let timer;
let remainingTime = 60;

function updateDisplay() {
  document.getElementById("interactive-timer").textContent = remainingTime;
}

function startTimer() {
  if (!timer) {
    timer = setInterval(() => {
      remainingTime--;
      updateDisplay();
      if (remainingTime <= 0) {
        clearInterval(timer);
        timer = null;
      }
    }, 1000);
  }
}

function pauseTimer() {
  clearInterval(timer);
  timer = null;
}

function resetTimer() {
  pauseTimer();
  remainingTime = 60;
  updateDisplay();
}

使用性能优化的倒计时

避免因标签页休眠导致的计时不准，使用requestAnimationFrame或补偿机制。

js实现倒计时js

function preciseCountdown(endTime, elementId) {
  let expected = Date.now() + 1000;
  let drift = 0;

  function step() {
    const remaining = endTime - Date.now();
    if (remaining <= 0) {
      document.getElementById(elementId).textContent = "Done";
      return;
    }

    const seconds = Math.floor(remaining / 1000);
    document.getElementById(elementId).textContent = seconds;

    expected += 1000;
    drift = Date.now() - expected;
    setTimeout(step, Math.max(0, 1000 - drift));
  }

  setTimeout(step, 1000);
}