js实现倒进时
JavaScript 实现倒计时
在 JavaScript 中实现倒计时功能通常涉及使用 setInterval 或 setTimeout 定时器函数，结合日期计算或简单的数字递减逻辑。以下是几种常见的实现方式：
基于日期差的倒计时
计算目标时间与当前时间的差值，动态更新剩余时间：
function countdown(targetDate, displayElement) {
const targetTime = new Date(targetDate).getTime();
const timer = setInterval(() => {
const now = new Date().getTime();
const distance = targetTime - now;
if (distance <= 0) {
clearInterval(timer);
displayElement.innerHTML = "倒计时结束";
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
displayElement.innerHTML = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
}, 1000);
}
// 调用示例
countdown("2024-12-31T23:59:59", document.getElementById("countdown"));简单数字递减倒计时
适用于固定秒数的倒计时（如 60 秒）：
function simpleCountdown(seconds, displayElement) {
let remaining = seconds;
const timer = setInterval(() => {
displayElement.textContent = remaining;
remaining--;
if (remaining < 0) {
clearInterval(timer);
displayElement.textContent = "时间到！";
}
}, 1000);
}
// 调用示例
simpleCountdown(60, document.getElementById("timer"));使用 requestAnimationFrame 实现高精度倒计时
适用于需要高精度更新的场景（如动画）：
function highPrecisionCountdown(endTime, callback) {
let startTime = performance.now();
function update() {
const elapsed = performance.now() - startTime;
const remaining = Math.max(0, endTime - elapsed);
callback(remaining);
if (remaining > 0) {
requestAnimationFrame(update);
}
}
update();
}
// 调用示例
highPrecisionCountdown(5000, (remaining) => {
console.log((remaining / 1000).toFixed(2) + "秒剩余");
});注意事项
- 性能优化：在页面隐藏时（如切换浏览器标签），
setInterval可能会被节流，建议使用visibilitychange事件补偿时间差。 - 清除定时器：组件卸载或倒计时结束时务必调用
clearInterval或cancelAnimationFrame。 - 时区处理：涉及日期的倒计时需明确时区，建议使用 UTC 时间或指定时区。
- 格式化输出：可使用
padStart补零（如seconds.toString().padStart(2, '0')）。
