当前位置：首页 > JavaScript

js实现计时

2026-02-02 09:18:37JavaScript

使用 `setInterval` 实现计时

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

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

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

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

使用 `setTimeout` 递归实现计时

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

js实现计时

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

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

updateTimer();

高性能计时（使用 `Date` 对象）

通过记录开始时间戳，结合 Date 对象计算精确耗时，适合需要高精度计时的场景。

js实现计时

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

setInterval(() => {
  const currentTime = new Date().getTime();
  const elapsed = Math.floor((currentTime - startTime) / 1000);
  timerElement.textContent = `已计时: ${elapsed} 秒`;
}, 1000);

格式化时间显示（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')}`;
}

// 使用示例
let seconds = 0;
setInterval(() => {
  seconds++;
  console.log(formatTime(seconds));
}, 1000);

暂停与恢复功能

通过变量控制计时器的暂停与恢复。

let seconds = 0;
let isPaused = false;
let timer;

function startTimer() {
  timer = setInterval(() => {
    if (!isPaused) {
      seconds++;
      console.log(`已计时: ${seconds} 秒`);
    }
  }, 1000);
}

function pauseTimer() {
  isPaused = true;
}

function resumeTimer() {
  isPaused = false;
}

startTimer();
// 暂停: pauseTimer();
// 恢复: resumeTimer();

标签: js