I finally managed to make my 24 hour non-date dependable countdown timer. The purpose of this is that the countdown starts every time someone visits the site. The problem is that when any unit (hours, mins, secs) reaches single digits values display them as such instead of the standard time format (9 minutes instead of 09 minutes, as it should). How can I implement a condition that if a value it's <= 9 it adds a 0 before it?

var count = 86400;
var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

function timer() {
  count = count - 1;
  if (count == -1) {
    clearInterval(counter);
    return;
  }

  var seconds = count % 60;
  var minutes = Math.floor(count / 60);
  var hours = Math.floor(minutes / 60);
  minutes %= 60;
  hours %= 60;

  document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds; // watch for spelling
}

 <span id='timer'></span>

I finally managed to make my 24 hour non-date dependable countdown timer. The purpose of this is that the countdown starts every time someone visits the site. The problem is that when any unit (hours, mins, secs) reaches single digits values display them as such instead of the standard time format (9 minutes instead of 09 minutes, as it should). How can I implement a condition that if a value it's <= 9 it adds a 0 before it?

var count = 86400;
var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

function timer() {
  count = count - 1;
  if (count == -1) {
    clearInterval(counter);
    return;
  }

  var seconds = count % 60;
  var minutes = Math.floor(count / 60);
  var hours = Math.floor(minutes / 60);
  minutes %= 60;
  hours %= 60;

  document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds; // watch for spelling
}

 <span id='timer'></span>

• javascript
• timer
• countdown

• If you want to hire a programmer, visit careers.stackoverflow.. Otherwise you need to show that you're willing to at least attempt to solve your own problem. – zzzzBov Commented Apr 6, 2015 at 19:43
• See this question stackoverflow./questions/5366849/… – Christophe Quintard Commented Apr 6, 2015 at 19:45

3 Answers 3

Create one function similar to following that does the job for you:

function makeMeTwoDigits(n){
    return (n < 10 ? "0" : "") + n;
}

And before printing your numbers call this function:

document.getElementById("timer").innerHTML = makeMeTwoDigits(hours) + ":" + makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds);

Explanation:

Like @rfornal said, we're checking if the number is less that 10 which means single digit, add '0' and return otherwise add nothing and return.

One point to observe is this won't work if the number is negative.

You can use universal pad function from How to output integers with leading zeros in JavaScript

function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

and change your code to:

document.getElementById("timer").innerHTML = pad(hours,2) + ":" + pad(minutes,2) + ":" + pad(seconds,2);

Try ...

document.getElementById("timer").innerHTML
= (hours<10 ? "0" + hours : hours) + ":" 
+ (minutes<10 ? "0" + minutes : minutes) + ":" 
+ (seconds<10 ? "0" + seconds : seconds);

Basically, saying if the value is less than 10, place a "0"; else just the value. Another way of saying this is if condition ? then : else ...

An alternate route ... more code would be:

var t_hours, t_minutes, t_seconds;
if (hours<10) {
  t_hours = "0" + hours;
} else {
  t_hours = hours;
}
if (minutes<10) {
  t_minutes = "0" + minutes;
} else {
  t_minutes = minutes;
}
if (seconds<10) {
  t_seconds = "0" + seconds;
} else {
  t_seconds = seconds;
}
document.getElementById("timer").innerHTML
= t_hours + ":" t_minutes + ":" t_seconds;