当前位置：首页 > JavaScript

js实现分钟计时

2026-03-01 05:03:28JavaScript

实现分钟计时器的方法

使用 setInterval 和 clearInterval

通过 setInterval 每隔一分钟执行一次回调函数，同时使用 clearInterval 停止计时器。

let minutes = 0;
const timer = setInterval(() => {
  minutes++;
  console.log(`已过去 ${minutes} 分钟`);
}, 60000);

// 停止计时器
// clearInterval(timer);

使用 setTimeout 递归调用

递归调用 setTimeout 实现每分钟执行一次函数，避免 setInterval 可能带来的误差累积。

js实现分钟计时

let minutes = 0;
function minuteTimer() {
  minutes++;
  console.log(`已过去 ${minutes} 分钟`);
  setTimeout(minuteTimer, 60000);
}

minuteTimer();

显示到页面

将计时器的结果显示在页面上，方便用户查看。

js实现分钟计时

let minutes = 0;
const display = document.getElementById('timer-display');

const timer = setInterval(() => {
  minutes++;
  display.textContent = `已过去 ${minutes} 分钟`;
}, 60000);

带暂停和继续功能

添加暂停和继续按钮，增强计时器的交互性。

let minutes = 0;
let timer;
const display = document.getElementById('timer-display');
const startButton = document.getElementById('start-button');
const pauseButton = document.getElementById('pause-button');

startButton.addEventListener('click', () => {
  timer = setInterval(() => {
    minutes++;
    display.textContent = `已过去 ${minutes} 分钟`;
  }, 60000);
});

pauseButton.addEventListener('click', () => {
  clearInterval(timer);
});

格式化时间显示

将时间格式化为 MM:SS 形式，提升可读性。

let seconds = 0;
const display = document.getElementById('timer-display');

const timer = setInterval(() => {
  seconds++;
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  display.textContent = `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}, 1000);

以上方法可以根据实际需求选择使用，灵活实现分钟计时功能。

标签: js