admin管理员组文章数量:1321612
Please I need help with implementing a 24 hours countdown timer in moment.js. here is my code :
<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>
The problem is anytime I refresh the page the timer Refreshes also. How do I get around this. And if there is a much better way to implementing this please do share.
Thanks
Please I need help with implementing a 24 hours countdown timer in moment.js. here is my code :
<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>
The problem is anytime I refresh the page the timer Refreshes also. How do I get around this. And if there is a much better way to implementing this please do share.
Thanks
Share Improve this question edited Mar 16, 2017 at 13:52 A. A. Sebastian 5381 gold badge7 silver badges19 bronze badges asked Mar 16, 2017 at 13:24 James BlareJames Blare 331 silver badge4 bronze badges 3- You can either have a timer count down 24 hours from when the page loads, or you can count down towards a predetermined point in time; it sounds like you want the latter. If so you need to at least have that timestamp somewhere in your code – Aron Commented Mar 16, 2017 at 13:58
- hello Aron, how will i create the timestamp so that it creates a 24hours stamp from current time – James Blare Commented Mar 16, 2017 at 14:10
- See my answer. Does it answer your question? – Aron Commented Mar 16, 2017 at 14:13
3 Answers
Reset to default 5This is how I would do it:
// 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);
This will print a timestamp out every second like this:
09:49:25
09:49:24
09:49:23
09:49:22
...
I think estimating time left logic might have a bug. The statement is const timeLeft = moment(end.diff(moment(), true))
.
What I found was ...
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
When you calculate with Date
object, it will return 9 hours something. - I think that initializing moment object with diff returns causes this bug.
And this is the final form of my solution.
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
The major difference is duration
function. Of course, it could be a version difference.
You could use localStorage to save the original timestamp. Another option is to save it on the server (database?). Either way, if you refresh the page, you will still count down to the same time.
本文标签: javascriptImplementing a 24hour Countdown timer using MomentjsStack Overflow
版权声明:本文标题:javascript - Implementing a 24hour Countdown timer using Moment.js - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742104130a2420941.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论