Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 756
Ignas Avatar asked May 05 '12 15:05

Ignas


People also ask

How do I get time on Momentjs?

To get the current date and time, just call moment() with no parameters. var now = moment();

What is Momentjs?

Moment. js is a stand-alone open-source JavaScript framework wrapper for date objects that eliminates native JavaScript date objects, which are cumbersome to use. Moment. js makes dates and time easy to display, format, parse, validate, and manipulate using a clean and concise API.

Do you need Momentjs?

You do not need Moment. js if you support newer browsers and if you show dates or datetimes only in your user's timezone. Things are not as easy as they seem, especially if you plan on manually parsing the output from the native APIs.


2 Answers

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);
like image 159
Andrei Avatar answered Sep 25 '22 01:09

Andrei


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);
like image 38
BishopZ Avatar answered Sep 23 '22 01:09

BishopZ