让秒自动更新？答案

【问题标题】：Make seconds update automatically?让秒自动更新？
【发布时间】：2016-03-08 16:04:06
【问题描述】：

我正在尝试仅在此网站上显示日期和时间，现在您必须刷新页面才能更新它（秒数等）。如何让秒自动更新？

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>JavaScript Testbed</title>
    </head>
    <body>
        <h1>
            Javascript will find out the date and the browser.
        </h1>
        <script type="text/javascript">
            var currentTime = new Date();
            var hours = currentTime.getHours();
            var minutes = currentTime.getMinutes();
            var seconds = currentTime.getSeconds();
            var suffix = "AM";

            if (seconds < 10)
                seconds = "0" + seconds; 

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

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

            document.write("<b><div id='d1'>" + hours + ":" + 
                minutes + ":"+ seconds + " " + suffix + "</div></b>");
        </script>
    </body>
</html>

【问题讨论】：

使用setInterval定期调用处理程序...

标签： javascript html time web

【解决方案1】：

将更新逻辑包装在一个函数中，并每 1000 毫秒调用一次 :)

function updateTime() {
  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();
  var suffix = "AM";

  if (seconds < 10)
      seconds = "0" + seconds; 

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

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

  document.write("<b><div id='d1'>" + hours + ":" + 
      minutes + ":"+ seconds + " " + suffix + "</div></b>");
}

window.setInterval(updateTime, 1000);

【讨论】：

【解决方案2】：

HTML

<span class="clock"></span>

Javascript

jQuery(function($) {
  setInterval(function() {
    var date = new Date(),
        time = date.toLocaleTimeString();
    $(".clock").html(time);
  }, 1000);
});

【讨论】：

【解决方案3】：

使用 setTimeout、here is a neat little script 来满足您的需求

【讨论】：

【解决方案4】：

这适用于我的网站。使用 setInterval 函数

$(document).ready(function(){

    set_time()
    window.setInterval(function(){set_time()}, 1000)

});


function set_time(){

    time = $('#time')
    raw_time = new Date();
    real_time = raw_time.getFullYear() + "-" + (raw_time.getMonth() + 1) + "-" + raw_time.getDate() + " " +  (raw_time.getHours()-12) + ":" + raw_time.getMinutes() + ":" + raw_time.getSeconds();
    time.html(real_time)
}

【讨论】：

如果您不想使用 jquery，您只需使用 document.getElementById 而不是 $('#')

【解决方案5】：

使用纯 javascript 和更新 <span> 元素

setInterval(function() {
  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();
  var suffix = "AM";

  if (seconds < 10)
    seconds = "0" + seconds;

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

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

  document.getElementById("clock").innerHTML = "<b><div id='d1'>" + hours + ":" +
    minutes + ":" + seconds + " " + suffix + "</div></b>";
}, 1000);

&lt;span id="clock"&gt;&lt;/span&gt;

【讨论】：