如何在不刷新网站的情况下使这个时钟工作？

Question

我有这个时钟的问题。 起初计时器没有出现，所以我使用了 defer 并且它出现了，但时间只在我刷新网站时才会改变。

我只想让这个计时器随着现实世界的时间而改变，而不仅仅是在我刷新网站时。

 const hourEl = document.getElementById('hour') const minEl = document.getElementById('minutes') const secEl = document.getElementById('seconds') const ampmEl = document.getElementById('ampm') function clockUpdate() { let h = new Date().getHours() let m = new Date().getMinutes() let s = new Date().getSeconds() let ampm = 'AM' if (h > 12) { h = h - 12; ampm = 'PM'; } hourEl.innerHTML = h; minEl.innerHTML = m; secEl.innerHTML = s; } clockUpdate();

 <span id="hour"></span>:<span id="minutes"></span>:<span id="seconds">:/span> <span id="ampm"></span>

Answer 1

您可以使用setTimeout(functionRef, delay)在几毫秒后重复 function 并每秒放置 function。

Answer 2

将您的代码放入 setInterval

 const hourEl = document.getElementById('hour') const minEl = document.getElementById('minutes') const secEl = document.getElementById('seconds') const ampmEl = document.getElementById('ampm') function clockUpdate() { let h = new Date().getHours() let m = new Date().getMinutes() let s = new Date().getSeconds() let ampm = 'AM' if (h > 12) { h = h - 12; ampm = 'PM'; } hourEl.innerHTML = h; minEl.innerHTML = m; secEl.innerHTML = s; } const int = setInterval(clockUpdate, 1000);

 <span id="hour"></span> <span id="minutes"></span> <span id="seconds"></span> <span id="ampm"></span>

Answer 3

只需包含一个 setInterval - 这里我使用半秒，因为 setInterval 不是非常可靠

我还使用 textContent 并填充数字。 你也忘记了ampm

 const hourEl = document.getElementById('hour') const minEl = document.getElementById('minutes') const secEl = document.getElementById('seconds') const ampmEl = document.getElementById('ampm') function clockUpdate() { let h = new Date().getHours() let m = new Date().getMinutes() let s = new Date().getSeconds() let ampm = 'AM' if (h > 12) { h = h - 12; ampm = 'PM'; } hourEl.textContent = String(h).padStart(2,"0"); minEl.textContent = String(m).padStart(2,"0"); secEl.textContent = String(s).padStart(2,"0"); ampmEl.textContent= ampm; } setInterval(clockUpdate,500);

 <span id="hour"></span>:<span id="minutes"></span>:<span id="seconds"></span>:<span id="ampm"></span>

Answer 4

您只调用 clockUpdate() function 一次。 考虑将其移动到每秒运行一次的 setInterval() 函数中（或更快以提高准确性）...像这样：

setInterval(clockUpdate, 1000);