CODEWITHSUNDEEP
javascriptjquerymomentjs
Ignas
Ignas

Reputation: 1965

Momentjs and countdown timer

I found the Momentjs library which is pretty cool, however I don't find the documentation to be very clear on how to achieve some simple tasks. I'm trying to build a countdown timer and I'm guessing I should use the duration object, but I don't quite understand how (maybe due to the fact that English isn't my first language). Anyways this is what I want:

var time = 7200;
var duration = moment.duration('seconds',time);

setInterval(function(){
  //show how many hours, minutes and secods are left
  $('.countdown').text(duration.format('h:mm:ss')); 
  //this doesn't work because there's no method format for the duration object.
},1000);

So everysecond it should display:

02:00:00

01:59:59

01:59:58

01:59:57

...

00:00:00

How would I achieve this result with the Momentjs library? Thanks!

Upvotes: 10

Views: 19866

Answers (4)

nokieng
nokieng

Reputation: 2126

Here is what I did in 2019.

var time = 7200;
var duration = moment.duration(time, "seconds");
var interval = 1000;

setInterval(function(){
  duration.subtract(interval, "milliseconds"); //using momentjs substract function
  console.log(moment(duration.asMilliseconds()).format('hh:mm:ss')); 
}, interval );

Upvotes: 1

The Demz
The Demz

Reputation: 7362

https://github.com/jsmreese/moment-duration-format Its a plugin to the Moment.js JavaScript date library to add comprehensive formatting to Moment Durations

<script type="application/javascript" src="/js/moment.js"></script>
<script type="application/javascript" src="/js/moment-duration-format.js"></script>

<script>

function startTimer(){

var duration = moment.duration({
    'hour': 2,
    'minutes': 0,
    'seconds': 0 
});

var interval = 1;

var timerID = -1; //hold the id

var timer = setInterval(function () {

    if(duration.asSeconds() <= 0){
        console.log("STOP!");
        console.log(duration.asSeconds());
        clearInterval(timerID);
    }
    else{

    duration = moment.duration(duration.asSeconds() - interval, 'seconds');

    $('.countdown').html( duration.format("hh:mm:ss", { trim: false }) );
    }

}, 1000);

timerID = timer;

return timer;
};

//start
myTimer = startTimer();    

//stop
//clearInterval(myTimer);

</script>

Upvotes: 1

Andrei
Andrei

Reputation: 56688

duration object represents a static period, and it does not increase/decrease with the flow of time. So if you what to decrease it you have to do it yourself, for example creating a kind of a seconds counter or recreating duration object every time. Here is the code for the second option:

var time = 7200;
var duration = moment.duration(time * 1000, 'milliseconds');
var interval = 1000;

setInterval(function(){
  duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');
  //show how many hours, minutes and seconds are left
  $('.countdown').text(moment(duration.asMilliseconds()).format('h:mm:ss'));
}, interval);

Upvotes: 16

BishopZ
BishopZ

Reputation: 6378

I don't know Momentjs very well either, but I think you are looking for something like this:

var time = 7200;
var duration = moment.duration('seconds',time);

setInterval(function(){
    var countdown = duration.milliseconds();
    $('.countdown').text(moment(countdown).format('h:mm:ss')); 
},1000);

Upvotes: 1

Related Questions