Javascript时钟没有实时运行

Question

我使用 html、css 和 javascript 制作了一个简单的时钟，但是在使用实时服务器扩展加载页面时，它显示了正确的时间，但没有按秒更改时间，但在重新加载页面时时间确实发生了变化。

我的代码

const d=new Date();

function time(){
    let h=document.getElementById('hour');
    let ho=d.getHours();
    
    let m=document.getElementById('min');
    let mi=d.getMinutes();
    
    let s=document.getElementById('sec');
    let se=d.getSeconds();
    
    h.innerHTML=ho;
    m.innerHTML=mi;
    s.innerHTML=se;
    
   setTimeout(time, 1000);
}

time();

Answer 1

首先你正在使用超时，我猜你想要一个间隔，检查差异。

其次，您只获得一次实例 Date()，因此您只知道第一次运行。 我的方法是这样的：

let h=document.getElementById('hour');
let m=document.getElementById('min');
let s=document.getElementById('sec');

function time(){

    const d=new Date();
    
    let ho=d.getHours();        
    let mi=d.getMinutes();    
    let se=d.getSeconds();
    
    h.innerHTML=ho;
    m.innerHTML=mi;
    s.innerHTML=se;
}

const myClock = setInterval(time, 1000);

//clearInterval(myClock);

Answer 2

这是因为您只在第一行设置一次时间。 如果您只对修复错误感兴趣，只需移动“const d=new Date();” 所以它在你的 time() function 之内。但这里有另一个关于如何做的例子，这个以 AM 和 PM 格式给你一些关于这个主题的一般想法。 请注意 setTimeout，它每秒运行 function currentTime()，其中包含一个新的 Date()。 来源是https://flexiple.com/javascript-clock/

 function currentTime() { let date = new Date(); let hh = date.getHours(); let mm = date.getMinutes(); let ss = date.getSeconds(); let session = "AM"; if(hh == 0){ hh = 12; } if(hh > 12){ hh = hh - 12; session = "PM"; } hh = (hh < 10)? "0" + hh: hh; mm = (mm < 10)? "0" + mm: mm; ss = (ss < 10)? "0" + ss: ss; let time = hh + ":" + mm + ":" + ss + " " + session; document.getElementById("clock").innerText = time; let t = setTimeout(function(){ currentTime() }, 1000); } currentTime();

 body { font-family: system-ui; background: #f06d06; color: white; text-align: center; }

 <div id = "clock" onload="currentTime()"></div>

Answer 3

1. 预先缓存您的元素，以便您始终访问 function 中每个元素的 DOM。

2. 将创建新日期移动到 function 中。

3. 也许使用textContent而不是innerHTML ，因为它只是您要添加的文本。

编辑：我添加了一个小填充 function，它在任何只有一位数字的数字前加上一个零前缀。

 const hour = document.getElementById('hour'); const minutes = document.getElementById('minutes'); const seconds = document.getElementById('seconds'); function pad(n) { return String(n).length === 1? `0${n}`: n; } function time() { const d = new Date(); hour.textContent = pad(d.getHours()); minutes.textContent = pad(d.getMinutes()); seconds.textContent = pad(d.getSeconds()); setTimeout(time, 1000); } time();

 .container { font-size: 2em; }

 <div class="container"> <span id="hour"></span>: <span id="minutes"></span>: <span id="seconds"></span> </div>

附加文件

• 模板/字符串文字