当前位置：首页 > JavaScript

js实现计时

2026-03-15 09:14:42JavaScript

使用 `setInterval` 实现计时器

通过 setInterval 可以创建一个周期性执行的计时器，适合需要持续更新时间的场景。

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

const timer = setInterval(() => {
  seconds++;
  timerElement.textContent = `已计时: ${seconds} 秒`;
}, 1000);

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

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

通过递归调用 setTimeout 实现计时，避免 setInterval 可能因任务阻塞导致的时间误差。

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

function updateTimer() {
  seconds++;
  timerElement.textContent = `已计时: ${seconds} 秒`;
  setTimeout(updateTimer, 1000);
}

updateTimer();

使用 `Date` 对象实现高精度计时

通过记录开始时间和当前时间的差值，实现更高精度的计时。

const startTime = new Date();
const timerElement = document.getElementById('timer');

function updateTimer() {
  const currentTime = new Date();
  const elapsed = Math.floor((currentTime - startTime) / 1000);
  timerElement.textContent = `已计时: ${elapsed} 秒`;
  requestAnimationFrame(updateTimer);
}

updateTimer();

实现暂停和继续功能

扩展基础计时器，添加暂停和继续功能。

let seconds = 0;
let isRunning = false;
let timerId;
const timerElement = document.getElementById('timer');

function startTimer() {
  if (!isRunning) {
    isRunning = true;
    timerId = setInterval(() => {
      seconds++;
      timerElement.textContent = `已计时: ${seconds} 秒`;
    }, 1000);
  }
}

function pauseTimer() {
  if (isRunning) {
    isRunning = false;
    clearInterval(timerId);
  }
}

function resetTimer() {
  seconds = 0;
  isRunning = false;
  clearInterval(timerId);
  timerElement.textContent = `已计时: 0 秒`;
}

格式化时间显示

将秒数转换为更易读的 HH:MM:SS 格式。

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')
  ].join(':');
}

// 使用示例
console.log(formatTime(3661)); // 输出 "01:01:01"

使用 Web Worker 实现后台计时

通过 Web Worker 在后台线程运行计时逻辑，避免主线程阻塞。

js实现计时

// main.js
const worker = new Worker('timer-worker.js');
worker.onmessage = (e) => {
  document.getElementById('timer').textContent = `已计时: ${e.data} 秒`;
};

// timer-worker.js
let seconds = 0;
setInterval(() => {
  seconds++;
  postMessage(seconds);
}, 1000);

标签: js