当前位置：首页 > JavaScript

js实现分钟计时

2026-04-04 05:40:48JavaScript

JavaScript 实现分钟计时

使用 setInterval 和 Date 对象可以轻松实现分钟计时功能。以下是几种常见实现方式：

基础计时器

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

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

let minutes = 0;
let timer = null;

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

function pauseTimer() {
  clearInterval(timer);
}

显示格式化的时间

let totalSeconds = 0;
const timer = setInterval(() => {
  totalSeconds += 60;
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  console.log(`已过去 ${minutes} 分 ${seconds} 秒`);
}, 60000);

页面显示计时

HTML 部分：

<div id="timer">00:00</div>
<button id="start">开始</button>
<button id="pause">暂停</button>

JavaScript 部分：

js实现分钟计时

let minutes = 0;
let timer = null;

document.getElementById('start').addEventListener('click', () => {
  timer = setInterval(() => {
    minutes++;
    document.getElementById('timer').textContent = 
      `${minutes.toString().padStart(2, '0')}:00`;
  }, 60000);
});

document.getElementById('pause').addEventListener('click', () => {
  clearInterval(timer);
});

使用 requestAnimationFrame 实现高精度计时

let startTime = Date.now();
let elapsedMinutes = 0;

function updateTimer() {
  const currentTime = Date.now();
  const elapsedTime = currentTime - startTime;
  elapsedMinutes = Math.floor(elapsedTime / 60000);

  console.log(`已过去 ${elapsedMinutes} 分钟`);
  requestAnimationFrame(updateTimer);
}

updateTimer();

这些方法可以根据具体需求选择使用，基础计时器适合简单场景，而带控制功能的计时器更适合需要交互的应用。

标签: js