Question

我需要帮助在moment.js中实施24小时倒数计时器。这是我的代码：

<script>
window.onload = function(e){

var $clock = $('#clock'),

duration1 = moment.duration({
    'seconds': 30,
    'hour': 0,
    'minutes': 0,
    'days':0
});
duration2 = moment.duration({
    'seconds': 60,
    'hour': 0,
    'minutes': 0,
    'days':0
});

diff=duration2-duration1;
duration=moment.duration(diff, 'milliseconds');


interval = 1000;
setInterval(function(){    
    duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');            
    $('#clock').text(duration.days() + 'd:' + duration.hours()+ 'h:' + duration.minutes()+ 'm:' + duration.seconds() + 's');    
 }, interval);
</script>

问题是我刷新页面时计时器刷新。我该如何解决这个问题。如果有更好的方法来实现这一点，请分享。

由于

Answer 1

我就是这样做的：

// create the timestamp here. I use the end of the day here as an example
const end = moment().endOf('day'); 

setInterval(function() {
    const timeLeft = moment(end.diff(moment())); // get difference between now and timestamp
    const formatted = timeLeft.format('HH:mm:ss'); // make pretty

    console.log(formatted); // or do your jQuery stuff here
}, 1000);

这将每秒打印一个时间戳，如下所示：

09:49:25 
09:49:24 
09:49:23 
09:49:22 
...

Answer 2

您可以使用localStorage保存原始时间戳。另一种选择是将其保存在服务器上（数据库？）。无论哪种方式，如果您刷新页面，您仍然会倒数到同一时间。

Answer 3

我认为估算剩余时间逻辑可能有一个错误。该语句为const timeLeft = moment(end.diff(moment(), true))。

我发现的是...

const end = moment().endOf('day');                      // Mon Oct 22 2018 23:59:59 GMT+0900
const now = moment();                                   // Mon Oct 22 2018 14:38:30 GMT+0900
const timeLeft = moment(end.diff(moment(), true));      // diff = 33689322
const formatted = timeLeft.format('HH:mm:ss');          // 18:21:29

使用Date对象进行计算时，它将返回9个小时的时间。 -我认为使用diff返回值来初始化矩对象会导致此错误。

这是我解决方案的最终形式。

const end = moment().endOf('day');

console.log('End date', moment(), end, end.diff(moment()), moment().diff(end));
const timeLeft = moment.duration(end.diff(moment()));       // Use duration

const formatted =
  this.checkDigit(timeLeft.hours()) + ':'
  + this.checkDigit(timeLeft.minutes()) + ':'
  + this.checkDigit(timeLeft.seconds());        // checkDigit is a function which adds 0 to the numbers under 10

主要区别是duration功能。当然，这可能是版本差异。

使用Moment.js实现24小时倒计时器

3 个答案: