js实现倒计时秒
JavaScript 实现倒计时秒
使用 setInterval 实现基础倒计时
let countdown = 10; // 初始秒数
const timer = setInterval(() => {
console.log(countdown);
countdown--;
if (countdown < 0) {
clearInterval(timer);
console.log("倒计时结束");
}
}, 1000);动态更新页面显示
假设页面有一个元素用于显示倒计时：
<div id="countdown">10</div>JavaScript 代码：
let seconds = 10;
const element = document.getElementById("countdown");
const timer = setInterval(() => {
element.textContent = seconds;
seconds--;
if (seconds < 0) {
clearInterval(timer);
element.textContent = "时间到！";
}
}, 1000);封装为可复用函数
function startCountdown(seconds, elementId) {
const element = document.getElementById(elementId);
const timer = setInterval(() => {
element.textContent = seconds;
seconds--;
if (seconds < 0) {
clearInterval(timer);
element.textContent = "倒计时结束";
}
}, 1000);
}
// 调用示例
startCountdown(30, "countdown");添加暂停和继续功能
let seconds = 10;
let timer;
const element = document.getElementById("countdown");
function start() {
timer = setInterval(() => {
element.textContent = seconds;
seconds--;
if (seconds < 0) {
clearInterval(timer);
element.textContent = "时间到！";
}
}, 1000);
}
function pause() {
clearInterval(timer);
}
// 页面按钮绑定事件
document.getElementById("startBtn").addEventListener("click", start);
document.getElementById("pauseBtn").addEventListener("click", pause);使用 requestAnimationFrame 实现更精确倒计时
let startTime = Date.now();
let duration = 10000; // 10秒
const element = document.getElementById("countdown");
function updateCountdown() {
const elapsed = Date.now() - startTime;
const remaining = Math.max(0, duration - elapsed);
const seconds = Math.ceil(remaining / 1000);
element.textContent = seconds;
if (remaining > 0) {
requestAnimationFrame(updateCountdown);
} else {
element.textContent = "时间到！";
}
}
updateCountdown();注意事项
- 使用
setInterval时，实际间隔可能会有微小偏差 - 页面不可见时（如切换标签页），某些浏览器会降低定时器精度
- 清除定时器使用
clearInterval避免内存泄漏 - 对于长时间倒计时，考虑使用服务器时间同步
