Javascript 计时器无法正确更新答案

【问题标题】：Javascript time keeper fails to update correctlyJavascript 计时器无法正确更新
【发布时间】：2013-12-10 17:08:13
【问题描述】：

我用 Javascript 代码构建了一个小时钟，但它无法正确更新。它显示的时间很好，但您必须刷新页面才能正确更新时钟。有没有办法让我的代码自动更新，而不必每次都更新页面？

图片：

<script type="text/javascript">

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()

if (minutes < 10)
minutes = "0" + minutes

var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}

document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>")

</script>

【问题讨论】：

使用setInterval(function(){....},3000);
您的代码在实现时工作正常；换句话说，其中的任何内容都不会导致时间被更新。

标签： javascript time clock

【解决方案1】：

首先，您可以将代码包装在一个函数中，例如currentTime()，将document.write 调用更改为return 语句，这样您就有了一个返回更新字符串的函数currentTime()。然后将句柄保存到要显示更新时间的 HTML 元素的位置，例如el = document.getElementById('time')，然后使用这样的间隔

setInterval(function () {
    el.innerHTML = currentTime();
}, 5000);

【讨论】：

【解决方案2】：

function UpdateClock(){
  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (minutes < 10)
   minutes = "0" + minutes
   var suffix = "AM";
   if (hours >= 12) {
      suffix = "PM";
      hours = hours - 12;
   }
   if (hours == 0) {
      hours = 12;
    }
   //document.write("<b>" + hours + ":" + minutes + " " + suffix + "</b>");

    document.getElementById('myClock').innerHTML = "<b>" + hours + ":" + minutes + " " + suffix + "</b>";
 }


 setInterval(function(){ UpdateClock(); }, 6000);

HTML：

 <div id="myClock"></div>

【讨论】：

由于document.write()调用，这将无法正常工作。
@Pointy 谢谢，更新了我的答案。
@user876345 谢谢。但是我尝试实现以下代码，现在没有时间显示。知道为什么要这样做吗？
我已经更新了我的答案，请检查它用于显示时间