CODEWITHSUNDEEP
javascriptjqueryhtml
iceiceicy
iceiceicy

Reputation: 734

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

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>

Upvotes: 1

Views: 2735

Answers (4)

S. Patel
S. Patel

Reputation: 172

// 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>

Upvotes: 0

Delvian
Delvian

Reputation: 185

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

Upvotes: 0

Ravi Tiwari
Ravi Tiwari

Reputation: 962

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'

Upvotes: 0

j08691
j08691

Reputation: 207901

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>

Upvotes: 4

Related Questions