Moment.js: 如何每分钟更新一次时间？

Question

我正在使用 moment.js 在我的网页上显示时间。我有 html div:

<div id="time"></div>

和以下 javascript：

<script>
    moment.tz.add('America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0');                                                                         
    var newYork = moment.tz("America/New_York").format('HH:mm a');
    $('#time').append( "Current time in New York: "+newYork );
</script>

当我运行页面时，它会给我正确的时间，但它不会每分钟都改变，所以即使在 10 分钟左右后，我也能得到加载时可见的时间页。有什么办法可以保持时间更新吗？到目前为止，这是我的 fiddle：http://jsfiddle.net/93pEd/132/

Answer 1

每 60 秒使用 setInterval() 到运行代码。

使用 html() 而不是 append() 以便覆盖之前的时间。

function updateTime(){
    var newYork = moment.tz("America/New_York").format('HH:mm a');
   $('#time').html( "Current time in New York: "+newYork );
};

moment.tz.add('America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0');                                                                         

updateTime();
setInterval(function(){
   updateTime();
},60000);

http://jsfiddle.net/93pEd/135/

这里还有一个使用秒的例子：

http://jsfiddle.net/93pEd/136/

Answer 2

Google 向我指出这个问题，想根据此处选择的解决方案分享我的解决方案，但情况略有不同，但基本相同（谢谢）。此解决方案修复了开始和新分钟之间的差距（Taplar 在 2015 年 5 月 6 日在初始 post 下指出）。

$(document).ready(function(){
  if ($('.world-time').length) {
   $('.world-time').each(function () {
    updateWorldTime($(this));
   });
  }

  function updateWorldTime(el) {
   var tz = el.data('tz');
   var timeToUpdate = parseInt(moment().tz(tz).format('s'));
   timeToUpdate = (((60 - timeToUpdate) * 1000));
   el.html(moment().tz(tz).format('HH:mm'));
    
    $('.update').html((timeToUpdate / 1000));
    $('.time').html(moment().format('HH:mm:ss,SS'));

   setTimeout(function () {
    updateWorldTime(el);
   }, timeToUpdate);
  }
 });

<span>Los Angeles: <strong data-tz="America/Los_Angeles" class="world-time">12:19</strong></span>
<span>New York: <strong data-tz="America/New_York" class="world-time">15:19</strong></span>
<span>London: <strong data-tz="Europe/London" class="world-time">20:19</strong></span>
<span>Prague: <strong data-tz="Europe/Prague" class="world-time">21:19</strong></span>
<span>Moscow: <strong data-tz="Europe/Moscow" class="world-time">23:19</strong></span>
<span>Hong Kong: <strong data-tz="Asia/Hong_Kong" class="world-time">04:19</strong></span>
<span>Sydney: <strong data-tz="Australia/Sydney" class="world-time">07:19</strong></span>

<br><br>
Wait for it:<br>
Next update in:<span class="update"></span>s.<br>
HH:mm:ss,SS <span class="time"></span><br><br><br>
Note: If snippet doesn't work, propably link to external library doesn't exists anymore (after 2022 this snippet will be broken), sorry. In real case HTML is generated by PHP, timzones from DateTime object fit to moment.js just fine.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data-2012-2022.min.js"></script>

Moment.js: 如何每分钟更新一次时间？

Moment.js: how to update the time every minute?

javascript

jquery

momentjs