当前位置：首页 > JavaScript

js实现读秒

2026-03-14 03:29:32JavaScript

实现JavaScript读秒功能

使用JavaScript实现读秒功能可以通过多种方式完成，以下是几种常见的方法：

使用setInterval函数

let seconds = 0;
const timer = setInterval(() => {
  seconds++;
  console.log(seconds + "秒");
  if(seconds >= 10) clearInterval(timer); // 10秒后停止
}, 1000);

使用setTimeout递归调用

js实现读秒

let count = 1;
function countSeconds() {
  console.log(count + "秒");
  count++;
  if(count <= 10) {
    setTimeout(countSeconds, 1000);
  }
}
countSeconds();

使用Date对象实现精确计时

const startTime = new Date().getTime();
const timer = setInterval(() => {
  const currentTime = new Date().getTime();
  const elapsedSeconds = Math.floor((currentTime - startTime) / 1000);
  console.log(elapsedSeconds + "秒");
  if(elapsedSeconds >= 10) clearInterval(timer);
}, 1000);

在HTML页面中显示倒计时

js实现读秒

<div id="countdown">10</div>
<script>
  let timeLeft = 10;
  const countdownElement = document.getElementById('countdown');
  const timer = setInterval(() => {
    timeLeft--;
    countdownElement.textContent = timeLeft;
    if(timeLeft <= 0) clearInterval(timer);
  }, 1000);
</script>

使用requestAnimationFrame实现高性能计时

let startTime = performance.now();
function updateTimer(currentTime) {
  const elapsedSeconds = Math.floor((currentTime - startTime) / 1000);
  console.log(elapsedSeconds + "秒");
  if(elapsedSeconds < 10) {
    requestAnimationFrame(updateTimer);
  }
}
requestAnimationFrame(updateTimer);

注意事项

定时器函数(setInterval/setTimeout)在浏览器标签页非活动状态时可能会被节流
长时间运行的计时器可能会因为JavaScript单线程特性导致时间不精确
清除定时器使用clearInterval/clearTimeout防止内存泄漏
对于精确计时需求，建议使用Web Worker或Service Worker

高级应用示例

带暂停/继续功能的计时器

let seconds = 0;
let timer;
let isRunning = false;

function startTimer() {
  if(!isRunning) {
    isRunning = true;
    timer = setInterval(() => {
      seconds++;
      console.log(seconds + "秒");
    }, 1000);
  }
}

function pauseTimer() {
  isRunning = false;
  clearInterval(timer);
}

function resetTimer() {
  pauseTimer();
  seconds = 0;
  console.log("计时器已重置");
}

这些方法可以根据具体需求选择使用，简单的读秒功能使用setInterval即可，需要更高精度或性能时可以考虑其他方案。

标签: js