javascript - Implementing a 24hour Countdown timer using Moment.js - Stack Overflow

admin管理员组

文章数量:1321833

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

• javascript
• timer
• momentjs

Share Improve this question Follow edited Mar 16, 2017 at 13:52 A. A. Sebastian 53811 gold badge77 silver badges1919 bronze badges asked Mar 16, 2017 at 13:24 James BlareJames Blare 3311 silver badge44 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

This 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