当前位置：首页 > JavaScript

js实现计时

2026-04-07 02:43:14JavaScript

使用 `setInterval` 实现计时器

通过 setInterval 可以创建一个周期性执行的计时器，适合需要持续更新的场景。以下代码实现一个从 0 开始递增的计时器：

let seconds = 0;
const timer = setInterval(() => {
  seconds++;
  console.log(`已计时: ${seconds} 秒`);
}, 1000);

// 停止计时（示例：10秒后停止）
setTimeout(() => {
  clearInterval(timer);
  console.log("计时结束");
}, 10000);

使用 `setTimeout` 递归实现计时器

递归调用 setTimeout 可以避免 setInterval 的潜在误差累积问题，适合需要高精度计时的场景：

js实现计时

let seconds = 0;
function startTimer() {
  setTimeout(() => {
    seconds++;
    console.log(`已计时: ${seconds} 秒`);
    startTimer(); // 递归调用
  }, 1000);
}
startTimer();

显示格式化的时间（HH:MM:SS）

将秒数转换为易读的时分秒格式：

js实现计时

function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

let seconds = 0;
setInterval(() => {
  seconds++;
  console.log(`当前时间: ${formatTime(seconds)}`);
}, 1000);

性能优化的 `requestAnimationFrame` 计时器

适用于需要与屏幕刷新率同步的高性能计时场景（如动画）：

let startTime = performance.now();
function updateTimer(timestamp) {
  const elapsed = Math.floor((timestamp - startTime) / 1000);
  console.log(`精确计时: ${elapsed} 秒`);
  requestAnimationFrame(updateTimer);
}
requestAnimationFrame(updateTimer);

暂停与恢复功能实现

扩展基础计时器，增加暂停和恢复功能：

let seconds = 0;
let timer;
let isRunning = false;

function start() {
  if (!isRunning) {
    isRunning = true;
    timer = setInterval(() => {
      seconds++;
      console.log(`计时中: ${seconds} 秒`);
    }, 1000);
  }
}

function pause() {
  clearInterval(timer);
  isRunning = false;
}

// 使用示例
start();
setTimeout(pause, 5000); // 5秒后暂停
setTimeout(start, 8000); // 8秒后恢复