Countdown timer using Moment js

Question

I am making a countdown timer for an event page  i used moment js for this  Here is fiddle for this  I am calculating date difference between event date and current date  timestamp   then using  quot duration quot  method from moment js   But the time left is not coming as expected  Expected - 00 30m 00s Actual - 5h 59m 00s Code    lt script gt      document  ready function         var eventTime    1366549200       var currentTime    1366547400       var time   eventTime - currentTime      var duration   moment duration time 1000   milliseconds        var interval   1000       setInterval function          duration   moment duration duration asMilliseconds   - interval   milliseconds              countdown   text moment duration asMilliseconds    format  H h  mm m  ss s             interval            lt  script gt   I read the momentjs documentation to figure out the problem  but no luck  Thanks for your time  Update   I end up doing like this    lt script gt      document  ready function         var eventTime    1366549200       var currentTime    1366547400       var leftTime   eventTime - currentTime   Now i am passing the left time from controller itself which handles timezone stuff  UTC   just to simply question i used harcoded values      var duration   moment duration leftTime   seconds        var interval   1000       setInterval function             Time Out check       if  duration asSeconds    lt   0            clearInterval intervalId           window location reload true    skip the cache and reload the page from the server                  Otherwise       duration   moment duration duration asSeconds   - 1   seconds              countdown   text duration days      d     duration hours     h     duration minutes     m     duration seconds      s           interval            lt  script gt   JS Fiddle

User · Answer

The following also requires the moment-duration-format plugin:

$.fn.countdown = function ( options ) {
    var $target = $(this);
    var defaults = {
        seconds: 0,
        format: 'hh:mm:ss',
        stopAtZero: true
    };
    var settings = $.extend(defaults, options);
    var eventTime = Date.now() + ( settings.seconds * 1000 );
    var diffTime = eventTime - Date.now();
    var duration = moment.duration( diffTime, 'milliseconds' );
    var interval = 0;
    $target.text( duration.format( settings.format, { trim: false }) );
    var counter = setInterval(function () {
        $target.text( moment.duration( duration.asSeconds() - ++interval, 'seconds' ).format( settings.format, { trim: false }) );
        if( settings.stopAtZero && interval >= settings.seconds ) clearInterval( counter );
    }, 1000);
};

Usage example:

$('#someDiv').countdown({
    seconds: 30*60,
    format: 'mm:ss'
});

User · Answer

In the last statement you are converting the duration to time which also considers the timezone  I assume that your timezone is  530  so 5 hours and 30 minutes gets added to 30 minutes  You can do as given below   var eventTime  1366549200     Timestamp - Sun  21 Apr 2013 13 00 00 GMT var currentTime   1366547400     Timestamp - Sun  21 Apr 2013 12 30 00 GMT var diffTime   eventTime - currentTime  var duration   moment duration diffTime 1000   milliseconds    var interval   1000   setInterval function      duration   moment duration duration - interval   milliseconds            countdown   text duration hours           duration minutes           duration seconds       interval

User · Answer

Here are some other solutions  No need to use additional plugins  Snippets down below uses  subtract API and requires moment 2 1 0  Snippets are also available in here https   jsfiddle net traBolic ku5cyrev  Formatting with the  format API   x000D   x000D  const duration   moment duration 9   s     const intervalId   setInterval      gt      duration subtract 1   s       const inMilliseconds   duration asMilliseconds           mm ss SS  will include milliseconds   console log moment utc inMilliseconds  format  HH h  mm m  ss s         if  inMilliseconds     0  return     clearInterval intervalId     console warn  Times up        1000   x000D   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 27 0 moment min js  gt  lt  script gt  x000D   x000D   x000D   Manuel formatting by  hours   minutes and  seconds API in a template string  x000D   x000D  const duration   moment duration 9   s     const intervalId   setInterval      gt      duration subtract 1   s       console log    duration hours   h   duration minutes   m   duration seconds   s             duration milliseconds     to add milliseconds    if  duration asMilliseconds       0  return     clearInterval intervalId     console warn  Times up        1000   x000D   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 27 0 moment min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Although I m sure this won t be accepted as the answer to this very old question  I came here looking for a way to do this and this is how I solved the problem   I created a demonstration here at codepen io   The Html    lt script src  https   cdnjs cloudflare com ajax libs moment js 2 13 0 moment min js  type  text javascript  gt  lt  script gt   lt script src  https   cdn rawgit com mckamey countdownjs master countdown min js  type  text javascript  gt  lt  script gt   lt script src  https   code jquery com jquery-3 0 0 min js  type  text javascript  gt  lt  script gt   lt div gt    The time is now   lt span class  now  gt  lt  span gt   a timer will go off  lt span class  duration  gt  lt  span gt  at  lt span class  then  gt  lt  span gt   lt  div gt   lt div class  difference  gt The timer is set to go off  lt span gt  lt  span gt  lt  div gt   lt div class  countdown  gt  lt  div gt    The Javascript   var now   moment       new Date   getTime    var then   moment   add 60   seconds       new Date now   60   1000        now   text moment now  format  h mm ss a         then   text moment then  format  h mm ss a         duration   text moment now  to then     function timerLoop           difference  gt  span   text moment   to then          countdown   text countdown then  toString       requestAnimationFrame timerLoop           Output   The time is now  5 29 35 pm  a timer will go off in a minute at 5 30 35 pm The timer is set to go off in a minute 1 minute   Note  2nd line above updates as per momentjs and 3rd line above updates as per countdownjs and all of this is animated at about  60FPS because of requestAnimationFrame      Code Snippet   Alternatively you can just look at this code snippet    x000D   x000D  var now   moment       new Date   getTime    x000D  var then   moment   add 60   seconds       new Date now   60   1000   x000D   x000D      now   text moment now  format  h mm ss a     x000D      then   text moment then  format  h mm ss a     x000D      duration   text moment now  to then    x000D   function timerLoop     x000D        difference  gt  span   text moment   to then    x000D        countdown   text countdown then  toString     x000D    requestAnimationFrame timerLoop   x000D        x000D   x000D     CountdownJS  http   countdownjs org  x000D     Rawgit  http   rawgit com  x000D     MomentJS  http   momentjs com  x000D     jQuery  https   jquery com  x000D     Light reading about the requestAnimationFrame pattern  x000D     http   www paulirish com 2011 requestanimationframe-for-smart-animating  x000D     https   css-tricks com using-requestanimationframe  x000D   lt script src  https   cdnjs cloudflare com ajax libs moment js 2 13 0 moment min js  type  text javascript  gt  lt  script gt  x000D   lt script src  https   cdn rawgit com mckamey countdownjs master countdown min js  type  text javascript  gt  lt  script gt  x000D   lt script src  https   code jquery com jquery-3 0 0 min js  type  text javascript  gt  lt  script gt  x000D   lt div gt  x000D    The time is now   lt span class  now  gt  lt  span gt   x000D   lt  div gt  x000D   lt div gt  x000D    a timer will go off  lt span class  duration  gt  lt  span gt  at  lt span class  then  gt  lt  span gt  x000D   lt  div gt  x000D   lt div class  difference  gt The timer is set to go off  lt span gt  lt  span gt  lt  div gt  x000D   lt div class  countdown  gt  lt  div gt  x000D   x000D   x000D    Requirements    CountdownJS  http   countdownjs org   And Rawgit to be able to use countdownjs  MomentJS  http   momentjs com  requestAnimationFrame   - use this for animation rather than setInterval      Optional Requirements    jQuery  https   jquery com    Additionally here is some light reading about the requestAnimationFrame   pattern    http   www paulirish com 2011 requestanimationframe-for-smart-animating  https   css-tricks com using-requestanimationframe    I found the requestAnimationFrame   pattern to be much a more elegant solution than the setInterval   pattern

User · Answer

Timezones  You have to deal with them  by using getTimezoneOffset   if you want your visitors from around the wolrd to get the same time   Try this http   jsfiddle net cxyms 2   it works for me  but I m not sure will it work with other timezones   var eventTimeStamp    1366549200      Timestamp - Sun  21 Apr 2013 13 00 00 GMT var currentTimeStamp    1366547400      Timestamp - Sun  21 Apr 2013 12 30 00 GMT  var eventTime   new Date    eventTime setTime 366549200    var Offset   new Date eventTime getTimezoneOffset   60000   var Diff   eventTimeStamp - currentTimeStamp    Offset getTime     2   var duration   moment duration Diff   milliseconds    var interval   1000   setInterval function      duration   moment duration duration asMilliseconds   - interval   milliseconds          countdown   text moment duration asMilliseconds    format  H h  mm m  ss s         interval

User · Answer

I thought I d throw this out there too  no plugins    It counts down for 10 seconds into the future      x000D   x000D      var countDownDate   moment   add 10   seconds    x000D   x000D        var x   setInterval function     x000D          diff   countDownDate diff moment     x000D       x000D          if  diff  lt   0    x000D            clearInterval x   x000D                If the count down is finished  write some text  x000D                countdown   text  EXPIRED    x000D            else x000D                countdown   text moment utc diff  format  HH mm ss     x000D   x000D           1000   x000D   lt script src  https   momentjs com downloads moment min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt div class  countdown  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Check out this plugin   moment-countdown     moment-countdown is a tiny moment js plugin that integrates with   Countdown js  The file is here    How it works     from then until now moment  1982-5-25   countdown   toString        gt   30 years  10 months  14 days  1 hour  8 minutes  and 14 seconds     accepts a moment  JS Date  or anything parsable by the Date constructor moment  1955-8-21   countdown  1982-5-25   toString        gt   26 years  9 months  and 4 days     also works with the args flipped  like diff   moment  1982-5-25   countdown  1955-8-21   toString        gt   26 years  9 months  and 4 days     accepts all of countdown s options moment   countdown  1982-5-25   countdown MONTHS countdown WEEKS  NaN  2  toString        gt   370 months  and 2 01 weeks

User · Answer

You re not using react native or react so forgive me this isn t a solution for you  - since this is a 7 year old post I m pretty sure you figured it out by now    But I was looking for something similar for react-native and it led me to this SO question  Incase anyone else winds up down the same road I thought I d share my use-moment-countdown hook for react or react native  https   github com BrooklinJazz use-moment-countdown  For example you can make a 10 minute timer like so  import React from  react   import    useCountdown   from  use-moment-countdown   const App        gt      const  start  time    useCountdown  m  10     return        lt div onClick  start  gt         time format  quot hh mm ss quot         lt  div gt         export default App

User · Answer

Here s my timer for 5 minutes   var start   moment  5 00    m ss    var seconds   start minutes     60  this interval   setInterval      gt        this timerDisplay   start subtract 1   second   format  m ss        seconds--      if  seconds     0  clearInterval this interval      1000

[javascript] Countdown timer using Moment js

Examples related to javascript

Examples related to jquery

Examples related to countdown

Examples related to unix-timestamp

Examples related to momentjs