当前位置：首页 > JavaScript

js实现计时功能

2026-03-01 04:49:02JavaScript

使用 `setInterval` 实现计时器

通过 setInterval 可以定期执行回调函数，适合实现计时功能。以下是一个简单的倒计时示例：

let seconds = 60;
const timer = setInterval(() => {
  console.log(`剩余时间: ${seconds}秒`);
  seconds--;
  if (seconds < 0) {
    clearInterval(timer);
    console.log("计时结束");
  }
}, 1000);

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

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

js实现计时功能

let seconds = 60;
function countdown() {
  console.log(`剩余时间: ${seconds}秒`);
  seconds--;
  if (seconds >= 0) {
    setTimeout(countdown, 1000);
  } else {
    console.log("计时结束");
  }
}
countdown();

使用 `Date` 对象计算时间差

通过记录开始时间和当前时间差，可以精确计算耗时：

const startTime = new Date().getTime();
function updateElapsedTime() {
  const currentTime = new Date().getTime();
  const elapsed = Math.floor((currentTime - startTime) / 1000);
  console.log(`已耗时: ${elapsed}秒`);
  setTimeout(updateElapsedTime, 1000);
}
updateElapsedTime();

性能优化的 `requestAnimationFrame`

对于需要高频率更新的计时场景（如动画），可以使用 requestAnimationFrame：

js实现计时功能

let startTime = performance.now();
function updateFrame(timestamp) {
  const elapsed = (timestamp - startTime) / 1000;
  console.log(`精确耗时: ${elapsed.toFixed(2)}秒`);
  requestAnimationFrame(updateFrame);
}
requestAnimationFrame(updateFrame);

暂停与恢复计时功能

通过记录暂停时的剩余时间，可以实现计时器的暂停与恢复：

let remaining = 60;
let timer;
function startTimer() {
  timer = setInterval(() => {
    console.log(`剩余: ${remaining}秒`);
    remaining--;
    if (remaining < 0) clearInterval(timer);
  }, 1000);
}
function pauseTimer() {
  clearInterval(timer);
}
startTimer();
// 调用 pauseTimer() 可暂停

格式化时间显示

将秒数转换为 HH:MM:SS 格式：

function formatTime(seconds) {
  const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
  const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
  return `${h}:${m}:${s}`;
}
console.log(formatTime(3661)); // 输出 "01:01:01"