当前位置：首页 > JavaScript

js怎么实现分钟倒计时

2026-01-31 09:28:30JavaScript

实现分钟倒计时的方法

在JavaScript中实现分钟倒计时可以通过以下步骤完成，核心是利用setInterval或setTimeout函数结合时间计算。

基本倒计时逻辑

定义一个倒计时函数，接收总分钟数作为参数，转换为秒数后开始递减：

function startCountdown(minutes) {
  let seconds = minutes * 60;
  const countdownElement = document.getElementById('countdown'); // 显示倒计时的DOM元素

  const timer = setInterval(() => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;

    countdownElement.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;

    if (seconds <= 0) {
      clearInterval(timer);
      countdownElement.textContent = '时间到！';
    }
    seconds--;
  }, 1000);
}

格式化时间显示

添加补零函数确保个位数时间显示为两位数：

function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

// 在倒计时函数中使用：
countdownElement.textContent = `${formatTime(mins)}:${formatTime(secs)}`;

暂停和继续功能

通过清除和重新设置定时器实现暂停与继续：

let timer;
let isPaused = false;
let remainingSeconds = 0;

function togglePause() {
  if (isPaused) {
    startCountdown(remainingSeconds / 60);
  } else {
    clearInterval(timer);
  }
  isPaused = !isPaused;
}

完整示例代码

<!DOCTYPE html>
<html>
<body>
  <div id="countdown">05:00</div>
  <button onclick="startCountdown(5)">开始5分钟倒计时</button>
  <button onclick="togglePause()">暂停/继续</button>

  <script>
    let timer;
    let isPaused = false;
    let remainingSeconds = 0;

    function startCountdown(minutes) {
      clearInterval(timer);
      remainingSeconds = minutes * 60;
      isPaused = false;

      timer = setInterval(updateCountdown, 1000);
    }

    function updateCountdown() {
      if (isPaused) return;

      const mins = Math.floor(remainingSeconds / 60);
      const secs = remainingSeconds % 60;
      document.getElementById('countdown').textContent = 
        `${formatTime(mins)}:${formatTime(secs)}`;

      if (remainingSeconds <= 0) {
        clearInterval(timer);
        document.getElementById('countdown').textContent = '时间到！';
      }
      remainingSeconds--;
    }

    function formatTime(time) {
      return time < 10 ? `0${time}` : time;
    }

    function togglePause() {
      isPaused = !isPaused;
    }
  </script>
</body>
</html>

使用Date对象精确计时

避免setInterval的误差，改用Date对象计算时间差：

let endTime;

function startCountdown(minutes) {
  endTime = new Date();
  endTime.setMinutes(endTime.getMinutes() + minutes);
  timer = setInterval(updateCountdown, 1000);
}

function updateCountdown() {
  const now = new Date();
  const diff = endTime - now;

  if (diff <= 0) {
    clearInterval(timer);
    document.getElementById('countdown').textContent = '时间到！';
    return;
  }

  const mins = Math.floor(diff / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  document.getElementById('countdown').textContent = 
    `${formatTime(mins)}:${formatTime(secs)}`;
}