在javascript中制作一个实时时钟

wil*_*rot 7 javascript time date clock setinterval

时钟有点工作.但它不是替换当前的时间,而是每秒打印一个新的时间.我理解它为什么这样做,但我不知道如何解决它.如果你能直接给出一些提示而不说答案,我将不胜感激.谢谢.这是我的代码:

function time(){
    var d = new Date();
    var s = d.getSeconds();
    var m = d.getMinutes();
    var h = d.getHours();
    document.write(h + ":" + m + ":" + s);
}

setInterval(time,1000);
Run Code Online (Sandbox Code Playgroud)

小智 12

您还可以在 Date() 上使用 toLocaleTimeString() 来获取显示日期,而不是通过这么多变量创建。

window.onload = displayClock();
function displayClock(){
  var display = new Date().toLocaleTimeString();
  document.body.innerHTML = display;
  setTimeout(displayClock, 1000); 
}
Run Code Online (Sandbox Code Playgroud)


Pra*_*lan 10

添加span元素并更新其文本内容.

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = h + ":" + m + ":" + s;
}

setInterval(time, 1000);
Run Code Online (Sandbox Code Playgroud)
<span id="span"></span>
Run Code Online (Sandbox Code Playgroud)


crg*_*g63 9

new Date().toLocaleTimeString()在 setInterval 函数内使用。

setInterval(() => console.log(new Date().toLocaleTimeString()),1000);
 
Run Code Online (Sandbox Code Playgroud)


Nag*_*iya 5

以上是我的回答,希望对您有所帮助。

<html>

<body>
  <script type="text/javascript" charset="utf-8">
    let a;
    let time;
    setInterval(() => {
      a = new Date();
      time = a.getHours() + ':' + a.getMinutes() + ':' + a.getSeconds();
      document.getElementById('time').innerHTML = time;
    }, 1000);
  </script>
  <span id="time"></span>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

我使用了setInterval箭头函数并在外部声明了变量atime以避免重复分配,其中跨度 id(time) 运行指定的时间间隔(此处为 1000),并document.getElementById("time")调用通过指定的 ID 获取元素,而且它是将该元素的 的值设置innerHTML为 的值time

  • 我已经用解释更新了我的答案,@Klaassiek,谢谢,这是我第一次回答,不会再重复。 (2认同)