秒杀倒计时跟本地时间一直有不到一秒的误差
如题，调了很久一直有误差，不知道什么原因
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现秒杀倒计时</title>
<script>
window.addEventListener('DOMContentLoaded', function() {
function getCountdown() {
let hourSpan = document.querySelector('.hour');
let minSpan = document.querySelector('.minute');
let secondSpan = document.querySelector('.second');
let timeIntervalByMillisecond = new Date('2023-8-31 23:50:00') - new Date();
let timeInterval = Math.floor(timeIntervalByMillisecond/1000);
let timeErrorValue = timeIntervalByMillisecond % 1000;
let hour = Math.floor(timeInterval/3600);
let min = Math.floor(timeInterval/60-hour*60);
let second = timeInterval-hour*3600-min*60;
hourSpan.innerHTML = hour.toString().padStart(2, '0');
minSpan.innerHTML = min.toString().padStart(2, '0');
secondSpan.innerHTML = second.toString().padStart(2, '0');
if (hour + min + second > 0) {
return timeErrorValue;
}
else {
return false;
}
}
function getCountdownAuto() {
let timesUp = getCountdown();
if (timesUp === false) {
window.clearInterval(Countdown);
}
}
let correctionTime = 1000 - getCountdown();
let initializeCountdown = window.setTimeout(getCountdown, correctionTime);
window.clearTimeout(initializeCountdown);
let Countdown = window.setInterval(getCountdownAuto, 1000);
let stopTimer = document.getElementsByTagName('button')[0];
stopTimer.addEventListener('click', function () {
window.clearInterval(Countdown);
});
});
</script>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
background-color: black;
color: white;
line-height: 100px;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<button>停止定时器</button>
<div>
<span class="hour">10</span>
<span class="minute">20</span>
<span class="second">30</span>
</div>
</body>
</html>7
收起
正在回答
1回答
同学，你好！计时器函数（例如setTimeout或setInterval）不是完全准确的。javaScript是单线程的脚本语言当计时器的回调函数执行时间超过了设定的时间间隔时，就会导致计时器循环的误差。可能会有误差，也有可能会受到浏览器性能的影响造成误差
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星