Add 0's to this countdown timer

Question

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>

If you want to hire a programmer, visit [careers.stackoverflow.com](http://careers.stackoverflow.com). Otherwise you need to show that you're willing to at least attempt to solve your own problem. — zzzzBov, Apr 06 '15 at 19:43
See this question http://stackoverflow.com/questions/5366849/convert-1-to-0001-in-javascript — Christophe Quintard, Apr 06 '15 at 19:45

score 7 · Accepted Answer · edited Apr 06 '15 at 20:59

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.

rfornal · Answer 2 · 2015-04-06T20:05:25.600

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;

I would recommend showing `if/else` also, the OP is a beginner. We don't want to confuse them with harder to read ternary operators. — Spencer Wieczorek, Apr 06 '15 at 19:45

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

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

edited May 23 '17 at 12:22

Community

1
1

answered Apr 06 '15 at 19:46

Piotr Stapp

19,392
11
68
116

Wow, three useful and correct answers so quickly. I wish I was able to mark all three as correct. I implemented roxan's one as it fits nicely into what I already coded, but thanks to you all. – Luis Mercado Apr 06 '15 at 20:01

Add 0's to this countdown timer

3 Answers3