js倒计时效果实现

使用 setTimeout 实现倒计时

通过递归调用 setTimeout 实现倒计时功能，适用于简单的倒计时需求。

function countdown(seconds) {
  if (seconds <= 0) {
    console.log("倒计时结束");
    return;
  }

  console.log(`剩余时间: ${seconds}秒`);
  setTimeout(() => countdown(seconds - 1), 1000);
}

countdown(10);

使用 setInterval 实现倒计时

通过 setInterval 定时器实现更精确的倒计时控制，可以随时清除定时器。

let seconds = 10;
const timer = setInterval(() => {
  if (seconds <= 0) {
    clearInterval(timer);
    console.log("倒计时结束");
    return;
  }

  console.log(`剩余时间: ${seconds}秒`);
  seconds--;
}, 1000);

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

实现可暂停、继续的倒计时功能，适合需要交互的场景。

let seconds = 10;
let timer = null;
let isPaused = false;

function startCountdown() {
  timer = setInterval(() => {
    if (seconds <= 0) {
      clearInterval(timer);
      console.log("倒计时结束");
      return;
    }

    if (!isPaused) {
      console.log(`剩余时间: ${seconds}秒`);
      seconds--;
    }
  }, 1000);
}

function pauseCountdown() {
  isPaused = true;
}

function resumeCountdown() {
  isPaused = false;
}

startCountdown();
// 调用 pauseCountdown() 暂停
// 调用 resumeCountdown() 继续

页面显示的倒计时

在HTML页面中显示实时更新的倒计时效果。

<div id="countdown">10</div>
<button id="startBtn">开始</button>
<button id="pauseBtn">暂停</button>

<script>
  let seconds = 10;
  let timer = null;
  let isPaused = false;

  document.getElementById('startBtn').addEventListener('click', () => {
    if (timer) clearInterval(timer);
    seconds = 10;
    startCountdown();
  });

  document.getElementById('pauseBtn').addEventListener('click', () => {
    isPaused ? resumeCountdown() : pauseCountdown();
  });

  function startCountdown() {
    isPaused = false;
    timer = setInterval(updateCountdown, 1000);
  }

  function pauseCountdown() {
    isPaused = true;
  }

  function resumeCountdown() {
    isPaused = false;
  }

  function updateCountdown() {
    if (seconds <= 0) {
      clearInterval(timer);
      document.getElementById('countdown').textContent = "倒计时结束";
      return;
    }

    if (!isPaused) {
      document.getElementById('countdown').textContent = seconds;
      seconds--;
    }
  }
</script>

精确到毫秒的倒计时

实现毫秒级精度的倒计时显示。

let endTime = Date.now() + 10000; // 10秒后结束

function updateCountdown() {
  const now = Date.now();
  const remaining = endTime - now;

  if (remaining <= 0) {
    console.log("倒计时结束");
    return;
  }

  const seconds = Math.floor(remaining / 1000);
  const milliseconds = remaining % 1000;
  console.log(`剩余时间: ${seconds}.${milliseconds}秒`);

  requestAnimationFrame(updateCountdown);
}

updateCountdown();

带回调函数的倒计时

通过回调函数处理倒计时结束事件。

function countdownWithCallback(seconds, callback) {
  const timer = setInterval(() => {
    if (seconds <= 0) {
      clearInterval(timer);
      callback();
      return;
    }

    console.log(`剩余时间: ${seconds}秒`);
    seconds--;
  }, 1000);
}

countdownWithCallback(5, () => {
  console.log("倒计时完成，执行回调函数");
});

格式化显示的倒计时

将倒计时格式化为分钟:秒的形式显示。

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 countdownFormatted(seconds) {
  const timer = setInterval(() => {
    if (seconds <= 0) {
      clearInterval(timer);
      console.log("00:00 倒计时结束");
      return;
    }

    console.log(formatTime(seconds));
    seconds--;
  }, 1000);
}

countdownFormatted(125); // 显示格式: 02:05