Moment.js:如何更新每分钟的时间?

时间:2015-05-06 11:20:03

标签: javascript jquery momentjs

我使用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分钟左右之后我也会得到加载页面时可见的时间。有没有办法让时间更新? 到目前为止,这是我的小提琴:http://jsfiddle.net/93pEd/132/

2 个答案:

答案 0 :(得分:8)

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

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

答案 1 :(得分:0)

Google向我指出了这个问题,希望基于这里选择的解决方案(略有不同)共享我的解决方案,但情况基本相同。此解决方案可以解决开始时间和新分钟之间的差距(塔普拉(Taplar)于15年5月6日在初始帖子中指出了这一点)。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-if="fileHeaders !== ''">
    <div class="form-group">
        <label for="selectId">Select ID Column</label>
        <select class="form-control" id="selectId" v-model="selectedIdCol">
            <option v-for="fileHeader in fileHeaders" :value="fileHeader">{{fileHeader}}
            </option>
        </select>
    </div>
    <div class="form-group">
        <label for="selectDate">Select Date Column</label>
        <select class="form-control" id="selectDate" v-model="selectedDateCol">
            <option v-for="fileHeader in fileHeaders" :value="fileHeader">{{fileHeader}}
            </option>
        </select>
    </div>
    <button @click="send">SEND</button>
</div>
</div>
$(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);
  }
 });