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

这是因为您只在第一行设置了一次时间。如果您只对修复错误感兴趣，只需移动“const d=new Date();”这样它就在您的 time() 函数中。但这里有另一个关于如何做到这一点的例子，它以 AM 和 PM 格式为您提供一些关于这个主题的一般想法。请注意 setTimeout，它每秒运行函数 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 2

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

其次，您只获得一次实例 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 3

预先缓存您的元素，以便您始终在函数中访问每个元素的 DOM。
将新日期的创建移动到函数中。
也许使用 textContent 而不是 innerHTML，因为它只是您要添加的文本。

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

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>

其他文档

Template/string literals

Javascript 时钟不是 运行 实时

Javascript clock not running in real time

html

javascript

clock

我的代码

Javascript 时钟不是运行实时