当前位置：首页 > JavaScript

js实现计时功能

2026-04-04 05:25:00JavaScript

使用 `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` 对象实现高精度计时

通过 Date 对象记录开始时间，计算时间差实现高精度计时。

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

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

实现暂停/继续功能

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

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

function startTimer() {
  timer = setInterval(() => {
    if (!isPaused) {
      seconds++;
      timerElement.textContent = `已运行: ${seconds} 秒`;
    }
  }, 1000);
}

function togglePause() {
  isPaused = !isPaused;
}

startTimer();

格式化时间显示

将秒数格式化为更易读的 HH:MM:SS 形式。

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

// 使用示例
timerElement.textContent = formatTime(seconds);

使用 Web Worker 实现后台计时

避免主线程阻塞，使用 Web Worker 实现精确的后台计时。

// worker.js
let seconds = 0;

setInterval(() => {
  seconds++;
  postMessage(seconds);
}, 1000);

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = (e) => {
  document.getElementById('timer').textContent = `已运行: ${e.data} 秒`;
};

使用 `requestAnimationFrame` 实现动画计时

适合需要与屏幕刷新率同步的动画计时场景。

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

function updateTimer(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = Math.floor((timestamp - startTime) / 1000);
  timerElement.textContent = `已运行: ${elapsed} 秒`;
  requestAnimationFrame(updateTimer);
}

requestAnimationFrame(updateTimer);

使用 `performance.now()` 实现高精度计时

比 Date 对象精度更高，适合需要微秒级精度的场景。

const startTime = performance.now();
const timerElement = document.getElementById('timer');

setInterval(() => {
  const elapsed = Math.floor((performance.now() - startTime) / 1000);
  timerElement.textContent = `已运行: ${elapsed} 秒`;
}, 1000);

实现倒计时功能

修改计时逻辑实现倒计时功能。

js实现计时功能

let countdown = 60; // 60秒倒计时
const timerElement = document.getElementById('timer');

const timer = setInterval(() => {
  countdown--;
  timerElement.textContent = `剩余时间: ${countdown} 秒`;
  if (countdown <= 0) clearInterval(timer);
}, 1000);