当前位置：首页 > JavaScript

js实现读秒

2026-02-01 05:11:59JavaScript

使用 `setInterval` 实现读秒

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

let seconds = 10; // 初始秒数
const countdownElement = document.getElementById('countdown');

const timer = setInterval(() => {
  seconds--;
  countdownElement.textContent = seconds;

  if (seconds <= 0) {
    clearInterval(timer);
    countdownElement.textContent = '时间到！';
  }
}, 1000);

使用 `setTimeout` 递归实现读秒

通过递归调用 setTimeout 实现更精确的读秒控制，避免 setInterval 的潜在误差。

js实现读秒

let seconds = 10;
const countdownElement = document.getElementById('countdown');

function updateCountdown() {
  seconds--;
  countdownElement.textContent = seconds;

  if (seconds > 0) {
    setTimeout(updateCountdown, 1000);
  } else {
    countdownElement.textContent = '时间到！';
  }
}

setTimeout(updateCountdown, 1000);

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

将秒数转换为 MM:SS 格式，适用于更长的倒计时场景。

js实现读秒

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

let timeLeft = 125; // 2分5秒
const timerElement = document.getElementById('timer');

setInterval(() => {
  timeLeft--;
  timerElement.textContent = formatTime(timeLeft);
}, 1000);

暂停与继续功能

添加按钮控制读秒的暂停和继续功能。

<button id="pause">暂停</button>
<button id="resume">继续</button>
<div id="display">10</div>

let seconds = 10;
let timer;
const display = document.getElementById('display');
const pauseBtn = document.getElementById('pause');
const resumeBtn = document.getElementById('resume');

function startTimer() {
  timer = setInterval(() => {
    seconds--;
    display.textContent = seconds;
    if (seconds <= 0) clearInterval(timer);
  }, 1000);
}

pauseBtn.addEventListener('click', () => clearInterval(timer));
resumeBtn.addEventListener('click', startTimer);

startTimer(); // 初始启动

性能优化建议

对于长时间运行的读秒器，建议使用 Date 对象计算时间差，避免因主线程阻塞导致计时不准。

let endTime = new Date().getTime() + 10000; // 10秒后结束

function update() {
  const now = new Date().getTime();
  const remaining = Math.max(0, Math.floor((endTime - now) / 1000));
  document.getElementById('optimized').textContent = remaining;

  if (remaining > 0) {
    requestAnimationFrame(update);
  }
}

update();

标签: js