我一直在尝试创建一个提示用户签到和退房的考勤系统。根据给定的输入，我分配了一个值time，它在1000毫秒后增加1(您可以检查代码)。但它并没有按照应有的方式运作。如果我登记，一小时后，它没有显示一小时。它比实际花费的时间要慢一点。我不确定是哪里出了问题。请帮帮我。为了澄清，我把你在页面上看到的每一秒之后的时间和时间连接起来。提前感谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background: black;
color: #fcbe24;
padding: 0 24px;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
button {
font-size: 25px;
}
</style>
<body>
<h1 id="header"></h1>
<div>
<button id="start" style="display:block;" onclick="startTimer()">Check-in</button>
<button id="stop" style="display:none;" onclick="stopTimer()">Check-out</button>
</div>
<div id="time"></div>
</body>
<script>
var time = 0;
var startInterval;
function startTimer() {
if (time == 0) document.getElementById("time").innerHTML = "00:00:00";
startInterval = setInterval(startTime, 1000);
document.getElementById('start').style.display = 'none';
document.getElementById('stop').style.display = 'block';
}
function stopTimer() {
clearInterval(startInterval);
document.getElementById('start').style.display = 'block';
document.getElementById('stop').style.display = 'none';
}
function startTime() {
time++;
var seconds = time % 60;
var minutes = Math.floor(time / 60) % 60;
var hours = Math.floor(Math.floor(time / 60) / 60) % 24;
console.log(seconds, minutes, hours);
if (seconds < 10) seconds = "0" + seconds.toString();
else seconds = seconds.toString();
if (minutes < 10) minutes = "0" + minutes.toString();
else minutes = minutes.toString();
if (hours < 10) hours = "0" + hours.toString();
else hours = hours.toString();
var currentdate = new Date();
var datetime = currentdate.getHours() + ":" +
currentdate.getMinutes() + ":" +
currentdate.getSeconds();
document.getElementById("time").innerHTML += "<br>" + datetime + ", " + hours + ":" + minutes + ":" + seconds;
}
</script>
</html>目前主流的操作系统都不是实时操作系统。他们不能保证，如果一个程序要求在X毫秒后通知他们，它将在X毫秒后得到通知。它们只保证程序将被通知，并且在X毫秒过去之前不会发生。
程序通常依赖于操作系统提供的计时器来完成与时间相关的工作。
即使它们不这样做，因为多任务意味着程序不是连续运行的，而是被操作系统中断，进入睡眠状态，然后再恢复，程序也不能保证X毫秒的时间间隔也正好是X毫秒。更重要的是，为了尽可能地接近，程序必须依赖操作系统定时器在时间到来时被唤醒。
总而言之，没有任何程序(在主流操作系统上)可以保证X毫秒的时间间隔正好是X毫秒;但是，您可以放心，它将花费不少于X毫秒的时间。
为了实现时间度量的目标(无论目标是什么)，您需要像这样仔细地度量时间:
- 获取当前时间并存储
- 根据需要设置超时或间隔
- 当超时时间过去，你的回调被调用时，再次获得当前时间。
- 如果两个时间之间的差异不同于您的超时或间隔的长度，然后调整下一个超时的长度来补偿，如果您的处理需要。或者只是记住差异，稍后再调整。这完全取决于你的目标和实现它的方式(超时或间隔)。
如果我办理入住，一小时后它没有显示1小时
定期调整/纠正，每次调用回调时，它将显示1小时。