javascript - 在不重新加载页面的情况下同步时间

Question

我正在构建一个使用计算机时间的网络应用程序我发现了如何获取小时和分钟并且我成功地将它们更新到 UI 但分钟字段与计算机时间不同步我必须重新加载页面才能看到它更新为新值，我不知道如何解决这个问题我觉得这是一个愚蠢的问题但我真的很挣扎，这是我的第一个使用 JavaScript 的应用程序所以请原谅我:p

我尝试了 setInterval 但它没有任何帮助请帮助这是我的代码:

HTML

<div class="headTime" >Time: <span class="Time"> 03:19</span></div>

Js

    var hours=d.getHours();
    var minutes=d.getMinutes();

    var Time=" 03:19";

    var newTime=Time.replace("03",hours);
    var newTime=newTime.replace("19",minutes);

    setInterval(function(){
  document.querySelector(".Time").innerHTML=newTime;
    },1000);

这个问题有更好的标题吗？感觉不太准确

Answer 1

您需要在每次传递给 setInterval 的回调中获取日期。为了测试目的，我也添加了秒数。

您不需要获取span 的测试并使用replace() 然后显示。你可以直接使用模板字符串

`${hours}:${minutes}`

给你的提示是在全局范围内声明元素 .Time 并且不要每秒调用 querySelector

const span = document.querySelector(".Time");

setInterval(function(){
    let date = new Date();
    let hours = date.getHours();
    let mins = date.getMinutes();
    let seconds = date.getSeconds();
    span.innerHTML= `${hours}:${mins}:${seconds}`;
},1000);

<div class="headTime" >Time: <span class="Time"> 03:19</span></div>

注意:如果您只显示分钟而不显示秒，则不应每秒调用该函数