当前位置：首页 > JavaScript

js实现计时功能

2026-01-30 13:43:50JavaScript

使用 `setInterval` 实现计时器

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

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

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

使用 `setTimeout` 实现单次延迟

setTimeout 适用于单次延迟执行，可通过递归实现循环计时。

js实现计时功能

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

使用 `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();

使用 `performance.now()` 获取高精度时间

适合需要毫秒级精度的场景，如性能测试。

js实现计时功能

const start = performance.now();
function checkTime() {
  const duration = (performance.now() - start).toFixed(2);
  console.log(`耗时: ${duration}毫秒`);
  requestAnimationFrame(checkTime); // 使用动画帧避免阻塞
}
checkTime();

封装为可复用计时器类

将功能封装为类，便于控制和管理。

class Timer {
  constructor() {
    this.seconds = 0;
    this.timerId = null;
  }

  start() {
    this.timerId = setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }

  stop() {
    clearInterval(this.timerId);
  }
}

const myTimer = new Timer();
myTimer.start();
// myTimer.stop();

页面显示实时计时

结合DOM操作实现可视化计时器。

<div id="display">0</div>
<button id="start">开始</button>
<button id="stop">停止</button>

<script>
  let timer;
  let seconds = 0;
  document.getElementById('start').addEventListener('click', () => {
    timer = setInterval(() => {
      seconds++;
      document.getElementById('display').textContent = seconds;
    }, 1000);
  });
  document.getElementById('stop').addEventListener('click', () => {
    clearInterval(timer);
  });
</script>