Create Inrement Timer in Javascript

Question

Problem

I want a timer that will accept the seconds, minutes, hours, days and start incrementing from there, say user open a page where the time fetched from server is say 2 hours 30 minutes 05 seconds, now the javascript timer will start incrementing from this so it 02:30:05 then 02:30:06 .. 02:31:00 and so on.. as soon as seconds reach 60 minute is incremented

What I have tried

I have implemented the same using moment.js

var duration = moment.duration({
    'seconds': 30,
        'hour': 2,
        'minutes': 10
});
var interval = 1;
setInterval(function () {
    duration = moment.duration(duration.asSeconds() + interval, 'seconds');
    //.asSeconds() 
    $('.countdown').text(Math.round(duration.asHours()) + 'h:' + Math.round(duration.asMinutes()) + 'm:' + Math.round(duration.asSeconds()) + 's'); //.seconds() 
    $('.countdown1').text(duration.days() + 'd:' + duration.hours() + 'h:' + duration.minutes() + 'm:' + duration.seconds() + 's');

}, 1000);

JSfiddle

Requirement

I want to know how i can implement it using javascript/jquery if possible else I will use moment.js one, I have looked around but all have countdown timer created from date, so the input will be seconds, minutes, hours, days and the counter will start from there in increment manner

Nothing wrong but I want to implement it using javascript/jquery if possible so that I dont have to load extra library — Raunak Kathuria, Jan 09 '14 at 01:47
Thanks for suggestion! I have already looked into this. It increments only seconds, i want to accept seconds, minutes, hours, days but I will give it a try to modify as per my requirement. — Raunak Kathuria, Jan 09 '14 at 01:57
for fewer than 12 hours, it's easy to use a plain Date(): new Date( (2*60*60*1000) + (10*60*1000) + (30000) ).toISOString().split("T")[1].split(".")[0] — dandavis, Jan 09 '14 at 01:58
@dandavis Thanks for suggestions, it can be days also with 24 hour span and it is returning "02:10:30" not incrementing it — Raunak Kathuria, Jan 09 '14 at 02:07
that;s just for turning ms into a human-readable time instead of all the yucky JS methods like getSeconds(). it can turn the function in the answer into a one-line solution... — dandavis, Jan 09 '14 at 02:13

score 1 · Accepted Answer · edited Jan 09 '14 at 02:17

You can try something as simple as this:

var input = {year: 0, month: 0, day: 0, hours: 2, minutes: 10, seconds: 30};

var timestamp = new Date(input.year, input.month, input.day, 
                         input.hours, input.minutes, input.seconds);

var interval = 1;

setInterval(function () {
    timestamp = new Date(timestamp.getTime() + interval * 1000);     
    $('.countdown2').text(timestamp.getDay()+'d:'+timestamp.getHours()+'h:'+
       timestamp.getMinutes()+'m:'+timestamp.getSeconds()+'s');
}, Math.abs(interval) * 1000);

Each interval, you're incrementing the time value of a Date object, then reading the hours/minutes/seconds back out and letting the native Date implementation worry about the conversion from raw seconds. Interval can be positive or negative, and as large as you like.

Demo

Thanks for the answer, its working as per my requirement :), will implement it in my work and let you know. Cheers — Raunak Kathuria, Jan 09 '14 at 02:09
Have added the fiddle just for demo purpose. Thanks its working great — Raunak Kathuria, Jan 09 '14 at 02:17

Create Inrement Timer in Javascript

1 Answers1