html - 如何在网页上显示当前时间？

Question

我想在我为类制作的网站上显示当前时间，但我找不到这样做的方法。他们是一种在代码中显示实时的方法吗？如果是这样，你是怎么做到的？

Answer 1

您可以通过首先创建一个元素来相当轻松地完成此操作:

<span id="clock"></span>

然后获取对该元素的引用:

var clockElement = document.getElementById( "clock" );

接下来我们需要一个函数来随着时间更新内容:

function updateClock ( clock ) {
    clock.innerHTML = new Date().toLocaleTimeString();
}

最后，我们要确保每秒调用一次以保持时钟最新:

setInterval(function () {
    updateClock( clockElement );
}, 1000);

所以当我们把它们放在一起时，它看起来像这样:

(function () {

  var clockElement = document.getElementById( "clock" );

  function updateClock ( clock ) {
    clock.innerHTML = new Date().toLocaleTimeString();
  }

  setInterval(function () {
      updateClock( clockElement );
  }, 1000);

}());