当前位置：首页 > JavaScript

js实现读秒

2026-04-05 21:35:48JavaScript

使用 `setInterval` 实现读秒

通过 setInterval 定时器实现读秒功能，每隔1秒更新显示的数字。

let count = 0;
const timer = setInterval(() => {
  count++;
  console.log(count);
  if (count >= 10) {
    clearInterval(timer); // 停止计时器
  }
}, 1000);

使用 `setTimeout` 递归实现读秒

通过递归调用 setTimeout 实现读秒，避免 setInterval 的潜在问题（如执行时间不精确）。

let count = 0;
function countDown() {
  count++;
  console.log(count);
  if (count < 10) {
    setTimeout(countDown, 1000);
  }
}
countDown();

带暂停和继续功能的读秒

实现一个可暂停和继续的读秒功能，适用于需要交互的场景。

let count = 0;
let timer = null;
let isPaused = false;

function startCount() {
  if (timer) clearInterval(timer);
  timer = setInterval(() => {
    if (!isPaused) {
      count++;
      console.log(count);
    }
  }, 1000);
}

function pauseCount() {
  isPaused = true;
}

function resumeCount() {
  isPaused = false;
}

startCount(); // 开始读秒
// pauseCount(); // 暂停
// resumeCount(); // 继续

页面显示读秒效果

在HTML页面中动态显示读秒效果，适用于倒计时或计时场景。

<div id="counter">0</div>
<button onclick="startCount()">开始</button>
<button onclick="pauseCount()">暂停</button>
<button onclick="resumeCount()">继续</button>

<script>
  let count = 0;
  let timer = null;
  let isPaused = false;

  function startCount() {
    if (timer) clearInterval(timer);
    count = 0;
    document.getElementById('counter').textContent = count;
    timer = setInterval(() => {
      if (!isPaused) {
        count++;
        document.getElementById('counter').textContent = count;
      }
    }, 1000);
  }

  function pauseCount() {
    isPaused = true;
  }

  function resumeCount() {
    isPaused = false;
  }
</script>

格式化显示时间（时分秒）

将读秒转换为更友好的时间格式（如 HH:MM:SS）。

js实现读秒

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 count = 0;
setInterval(() => {
  count++;
  console.log(formatTime(count));
}, 1000);