Countdown timer using Moment js
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 GMTvar currentTime = 1366547400; // Timestamp - Sun, 21 Apr 2013 12:30:00 GMTvar 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);
Check out this plugin:
moment-countdown is a tiny moment.js plugin that integrates with Countdown.js. The file is here.
How it works?
//from then until nowmoment("1982-5-25").countdown().toString(); //=> '30 years, 10 months, 14 days, 1 hour, 8 minutes, and 14 seconds'//accepts a moment, JS Date, or anything parsable by the Date constructormoment("1955-8-21").countdown("1982-5-25").toString(); //=> '26 years, 9 months, and 4 days'//also works with the args flipped, like diff()moment("1982-5-25").countdown("1955-8-21").toString(); //=> '26 years, 9 months, and 4 days'//accepts all of countdown's optionsmoment().countdown("1982-5-25", countdown.MONTHS|countdown.WEEKS, NaN, 2).toString(); //=> '370 months, and 2.01 weeks'
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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script><script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script><script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script><div> The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span></div><div class="difference">The timer is set to go off <span></span></div><div class="countdown"></div>
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 > 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 pmThe timer is set to go off in a minute1 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:
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 > span").text(moment().to(then)); $(".countdown").text(countdown(then).toString()); requestAnimationFrame(timerLoop);})();// CountdownJS: http://countdownjs.org/// Rawgit: http://rawgit.com/// MomentJS: http://momentjs.com/// jQuery: https://jquery.com/// Light reading about the requestAnimationFrame pattern:// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/// https://css-tricks.com/using-requestanimationframe/
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script><script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script><script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script><div> The time is now: <span class="now"></span>,</div><div> a timer will go off <span class="duration"></span> at <span class="then"></span></div><div class="difference">The timer is set to go off <span></span></div><div class="countdown"></div>
Requirements:
- CountdownJS: http://countdownjs.org/ (And Rawgit to be able to use countdownjs)
- MomentJS: http://momentjs.com/
requestAnimationFrame()
- use this for animation rather thansetInterval()
.
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.