当前位置：首页 > JavaScript

js实现倒计时

2026-02-28 17:24:14JavaScript

实现倒计时的基本方法

使用JavaScript实现倒计时可以通过setInterval或setTimeout函数来完成。以下是一个简单的倒计时示例：

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

countdown(10); // 从10秒开始倒计时

动态更新页面上的倒计时

如果需要在网页上动态显示倒计时，可以通过操作DOM元素来实现：

function updateCountdown(seconds, elementId) {
  const element = document.getElementById(elementId);
  let timer = setInterval(() => {
    element.textContent = seconds;
    seconds--;
    if (seconds < 0) {
      clearInterval(timer);
      element.textContent = "时间到！";
    }
  }, 1000);
}

updateCountdown(10, "countdown-display"); // 更新ID为countdown-display的元素

处理日期倒计时

对于更复杂的倒计时（如距离某个特定日期的时间），可以使用Date对象：

function dateCountdown(targetDate, elementId) {
  const element = document.getElementById(elementId);
  let timer = setInterval(() => {
    const now = new Date();
    const diff = targetDate - now;

    if (diff <= 0) {
      clearInterval(timer);
      element.textContent = "时间到！";
      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);

    element.textContent = `${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;
  }, 1000);
}

const targetDate = new Date("2023-12-31T23:59:59");
dateCountdown(targetDate, "date-countdown");

优化性能

为了避免频繁的DOM操作影响性能，可以使用requestAnimationFrame：

function smoothCountdown(seconds, elementId) {
  const element = document.getElementById(elementId);
  let start = Date.now();
  let end = start + seconds * 1000;

  function update() {
    const now = Date.now();
    const remaining = Math.max(0, end - now);
    const secs = Math.ceil(remaining / 1000);

    element.textContent = secs;

    if (remaining > 0) {
      requestAnimationFrame(update);
    } else {
      element.textContent = "时间到！";
    }
  }

  requestAnimationFrame(update);
}

smoothCountdown(10, "smooth-countdown");

添加暂停和继续功能

为了增加交互性，可以实现暂停和继续功能：

let timer;
let remainingSeconds = 10;
let isPaused = false;

function toggleCountdown(elementId) {
  const element = document.getElementById(elementId);

  if (isPaused) {
    isPaused = false;
    countdown(remainingSeconds, element);
  } else {
    isPaused = true;
    clearInterval(timer);
  }
}

function countdown(seconds, element) {
  remainingSeconds = seconds;
  timer = setInterval(() => {
    element.textContent = remainingSeconds;
    remainingSeconds--;
    if (remainingSeconds < 0) {
      clearInterval(timer);
      element.textContent = "时间到！";
    }
  }, 1000);
}

countdown(10, "interactive-countdown");

js实现倒计时