2

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

1
  • you might check this it is based on secs converted to hh:mm:ss possible duplicate of This Aug 29, 2013 at 9:13

3 Answers 3

12

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);
}
2
  • @Arthur Thanks for fixing the "fromatting" :p I got a bit lazy with that this time. Aug 29, 2013 at 9:27
  • @Kolink It's ok ;) Glad to help improve your post. :)
    – Arturs
    Aug 29, 2013 at 9:28
3
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/

0

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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.