Question

我正在构建一个使用计算机时间的Web应用程序，我发现如何获取小时和分钟，并成功将它们更新到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>

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

同步时间而无需重新加载页面

1 个答案: