js实现读秒
使用 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 的潜在误差。
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 格式，适用于更长的倒计时场景。
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();
