Moment.js：如何更新每分钟的时间？

I'm using moment.js to display time on my webpage. I have the html div:

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

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

and the following javascript:

和以下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>

When I run the page, it gives me the correct time, but it doesn't change with every minute, so even after 10 minutes or so I get the time that was visible when I loaded the page. Is there any way to keep the time updated? Here's my fiddle so far: http://jsfiddle.net/93pEd/132/

当我运行页面时,它给了我正确的时间,但它不会随着每分钟而改变,所以即使在10分钟左右之后我也会得到加载页面时可见的时间。有没有办法让时间更新?到目前为止,这是我的小提琴:http://jsfiddle.net/93pEd/132/

2 个解决方案

#1

Use setInterval() to run the code every 60 seconds.

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

Use html() instead of append() so that the previous time is overridden.

使用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/

Heres an example using seconds also:

下面还有一个使用秒的例子:

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

#2

Google point me to this question, want to share mine solution for slightly different case, but fundamentally same, based on selected solution here (thanks). This solution fix gap between start and new minute (pointed by Taplar at May 6 '15 under initial post).

谷歌指出我这个问题,希望分享我的解决方案略有不同的情况,但基本相同,基于选定的解决方案(谢谢)。这个解决方案修复了开始和新分钟之间的差距(Taplar于2015年5月6日在初始帖子下指出)。

$(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>*: <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>

#1