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

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 
...