我需要帮助在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>
问题是我刷新页面时计时器刷新。我该如何解决这个问题。如果有更好的方法来实现这一点,请分享。
由于
答案 0 :(得分: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
...
答案 1 :(得分:0)
您可以使用localStorage保存原始时间戳。另一种选择是将其保存在服务器上(数据库?)。无论哪种方式,如果您刷新页面,您仍然会倒数到同一时间。
答案 2 :(得分:0)
我认为估算剩余时间逻辑可能有一个错误。该语句为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
功能。当然,这可能是版本差异。