Countdown HH:MM:SS in Jquery

Question

I want to countdown timer in format of hh:mm:ss so I use this code it's convert seconds into required format but when I count down it display me NaN. Can you tell me what I am doing wrong Here is code

<div id="timer"></div>

JS

String.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10); // don't forget the second parm
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    var time = hours + ':' + minutes + ':' + seconds;
    return time;
}

var count = '62';
count = count.toHHMMSS();

var counter = setInterval(timer, 1000);

function timer() {

    count--;
    if (count <= 0) {
        clearInterval(counter);
        return;
    }

    $('#timer').html(count);
}

Here is JsFiddle link CountDown Timer

you might check this it is based on secs converted to hh:mm:ss `possible duplicate of` [This](http://stackoverflow.com/questions/1322732/convert-seconds-to-hh-mm-ss-with-javascript) — Deep Sharma, Aug 29 '13 at 09:13

score 12 · Accepted Answer · edited Aug 29 '13 at 09:23

Well, let's take a look at what your code does:

Set count to the string value 62.
Convert it to HHMMSS, so now count is equal to the string 00:01:02
Start the timer.
On the first run of the timer, decrement count. Erm... count is a string, you can't decrement it. The result is not a number.

Okay, so with that out of the, way how about fixing it:

function formatTime(seconds) {
    var h = Math.floor(seconds / 3600),
        m = Math.floor(seconds / 60) % 60,
        s = seconds % 60;
    if (h < 10) h = "0" + h;
    if (m < 10) m = "0" + m;
    if (s < 10) s = "0" + s;
    return h + ":" + m + ":" + s;
}
var count = 62;
var counter = setInterval(timer, 1000);

function timer() {
    count--;
    if (count < 0) return clearInterval(counter);
    document.getElementById('timer').innerHTML = formatTime(count);
}

@Arthur Thanks for fixing the "fromatting" :p I got a bit lazy with that this time. — Niet the Dark Absol, Aug 29 '13 at 09:27

score 3 · Answer 2 · answered Aug 29 '13 at 09:30

var count = '62'; // it's 00:01:02
var counter = setInterval(timer, 1000);
function timer() {
 if (parseInt(count) <= 0) {
    clearInterval(counter);
    return;
 }
 var temp = count.toHHMMSS();
 count = (parseInt(count) - 1).toString();
 $('#timer').html(temp);
}

http://jsfiddle.net/5LWgN/17/

score 0 · Answer 3 · answered Sep 15 '21 at 01:02

If you use the jquery moment plugin. If you are not using jQuery moment then you can use formatTime(seconds) function that is in the @Niet's answer https://stackoverflow.com/a/18506677/3184195

var start_time = 0;
var start_timer = null;
start_timer = setInterval(function() {
   start_time++;
   var formate_time = moment.utc(start_time * 1000).format('mm:ss');
      $('#Duration').text(formate_time);
   }, 1000);
});

function clear() {
    if (start_timer) clearInterval(start_timer);
}

Countdown HH:MM:SS in Jquery

3 Answers3