Show countdown timer in HH:MM:SS instead of H:M:S in Javascript

Question

I managed to display a countdown timer in H:M:S format.

May I know how can I display it to HH:MM:SS format? Example, let's say for 300 hours, 1 minute and 1 second, it will display as 300:01:01 instead of 300:1:1 .

This is what I got so far.

// Set the date we're counting down to
var countDownDate = new Date("Aug 31, 2019 22:55:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor(distance / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours + " : "
  + minutes + " : " + seconds + "";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<p id="demo"></p>

@itdoesntwork That question certainly doesn't require moment.js.. I get a feeling moment.js is becoming the new jQuery... — Adrian, Aug 31 '18 at 15:12
Possible duplicate:https://stackoverflow.com/questions/14638018/current-time-formatting-with-javascript — Fabio Manzano, Aug 31 '18 at 15:12
prepend a '0', read the last 2 chars: `('0' + minutes).slice(-2)` — Alex K., Aug 31 '18 at 15:14
Possible duplicate of [Add leading zeros to this javascript countdown script?](https://stackoverflow.com/questions/13838278/add-leading-zeros-to-this-javascript-countdown-script) — Adrian, Aug 31 '18 at 15:15

j08691 · Accepted Answer · 2018-08-31T15:18:50.843

Test for values less than 10 and append a leading zero

// Set the date we're counting down to
var countDownDate = new Date("Aug 31, 2019 22:55:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor(distance / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  if (hours < 10) hours = '0'+ hours;
  if (minutes < 10) minutes = '0'+ minutes;
  if (seconds < 10) seconds = '0'+ seconds;

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours + " : "
  + minutes + " : " + seconds + "";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<p id="demo"></p>

As kamoroso94 mentioned in a comment, you could also use padstart()

// Set the date we're counting down to
var countDownDate = new Date("Aug 31, 2019 22:55:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor(distance / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours.toString().padStart(2, '0') + " : "
  + minutes.toString().padStart(2, '0') + " : " + seconds.toString().padStart(2, '0') + "";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<p id="demo"></p>

[`String#padStart`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) also works! — kamoroso94, Aug 31 '18 at 15:14

score 0 · Answer 2 · answered Aug 31 '18 at 15:20

You can prefix(aka padLeft) the hours, minutes and seconds with arbitrary length strings as below:

function padLeft(padding, data) {
    return +(padding + data).slice(-padding.length);
}

padLeft('00', 3) // '03'
padLeft('00', 13) // '13'
padLeft('0000', 3) // '0003'

Delvian · Answer 3 · 2018-08-31T15:27:10.933

0

You can do this with a simple replace:

var timeString = (hours + ':' + minutes + ':' + seconds).replace(/\b(\d)\b/g, '0$1');

EDIT: in case you do not want to prepend a zero to the hours:

var timeString = (hours + ':' + minutes + ':' + seconds).replace(/:(\d)\b/g, ':0$1');

edited Aug 31 '18 at 15:27

answered Aug 31 '18 at 15:20

Delvian

185
8

score 0 · Answer 4 · answered Aug 31 '18 at 15:47

// Set the date we're counting down to
var countDownDate = new Date("Aug 31, 2019 22:55:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor(distance / (1000 * 60 * 60));
  var minutes = (`0${Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))}`).substr(-2); ;
  var seconds = (`0${Math.floor((distance % (1000 * 60)) / 1000)}`).substr(-2);



  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = `${hours}:${minutes}:${seconds}`;

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<p id="demo"></p>

It's often most helpful if you explain what you did rather just dump code and expect people to figure it out. — j08691, Aug 31 '18 at 15:52

Show countdown timer in HH:MM:SS instead of H:M:S in Javascript

4 Answers4