用js写一段精确倒计时的代码,要考虑到长时间倒计时的场景
时间: 2024-02-26 20:57:11 浏览: 123
好的,以下是一段使用 JavaScript 实现的精确倒计时代码,它能够处理长时间倒计时的场景:
```javascript
// 目标时间戳,比如距离 2022 年元旦的时间戳
const targetTimestamp = new Date('2022-01-01T00:00:00.000Z').getTime();
function updateCountdown() {
// 当前时间戳
const currentTimestamp = new Date().getTime();
// 计算剩余时间
const remainingTime = targetTimestamp - currentTimestamp;
// 如果剩余时间小于等于 0,倒计时结束
if (remainingTime <= 0) {
console.log('倒计时结束');
return;
}
// 将剩余时间转换为时、分、秒
const seconds = Math.floor(remainingTime / 1000 % 60);
const minutes = Math.floor(remainingTime / 1000 / 60 % 60);
const hours = Math.floor(remainingTime / 1000 / 60 / 60 % 24);
const days = Math.floor(remainingTime / 1000 / 60 / 60 / 24);
// 更新页面上的倒计时显示
console.log(`距离 2022 年元旦还有 ${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`);
// 每隔 1000 毫秒(1 秒)更新一次倒计时
setTimeout(updateCountdown, 1000);
}
// 启动倒计时
updateCountdown();
```
这段代码会在页面中显示距离 2022 年元旦还有多少天、小时、分钟、秒,每隔 1 秒更新一次倒计时。如果倒计时结束,则会输出 `倒计时结束`。注意,在长时间倒计时场景中,使用 setTimeout() 会导致计时器误差逐渐增大,因此可以考虑使用 setInterval() 或者 requestAnimationFrame() 来代替 setTimeout()。
阅读全文