Add 2 digit numbers on javascript live timer

Question

Does anyone know how to add 2 digits on a JavaScript live timer, I have the following time with days, hours, minutes and seconds, the issue is that when it gets to digits like 1-9 it only shows 9 I want it to show 09 etc. On days, hours, minutes and seconds.

For example, currently the code is showing 1 at the moment, I want it to show 01 days etc.

(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  let event = "July 10, 2021 01:00:00",
      countDown = new Date(event).getTime(),
      x = setInterval(function() {    

        let now = new Date().getTime(),
            distance = countDown - now;

          document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

        //do something later when date is reached
        if (distance < 0) {
          let headline = document.getElementById("headline"),
              countdown = document.getElementById("countdown"),
              content = document.getElementById("content");

         
          countdown.style.display = "none";
          content.style.display = "block";

          clearInterval(x);
        }
        //seconds
      }, 0)
  }());

.container {
  color: black;
  margin: 0 auto;
  text-align: center;
  font-family: "Nunito";
}

h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
}

li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  
}

li span {
  display: block;
  font-size: 4.5rem;
}


@media all and (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  
  li {
    font-size: 1.125rem;
    padding: .85rem;
  }
  
  li span {
    font-size: 3.375rem;
  }
}

<div class="container" style="position: absolute;">
  <div id="countdown">
    <ul style="margin-top: -30px">
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>hours</li>
      <li><span id="minutes"></span>mins</li>
      <li><span id="seconds"></span>secs</li>
    </ul>
      <script src="script.js"></script>
  </div>

`String(9).padStart(2, '0') === '09'`. Knowing this use can use it `String(Math.floor((distance % (day)) / (hour))).padStart(2, '0')`. Of course it'd be nice to create a formatting function — Yuriy Yakym, Jul 08 '21 at 16:41
This answer may also be helpful. https://stackoverflow.com/questions/2998784/how-to-output-numbers-with-leading-zeros-in-javascript — Ricardo Ferreira, Jul 08 '21 at 16:44

score 0 · Answer 1 · answered Jul 08 '21 at 16:50

String.prototype.padStart():

(function() {
  const second = 1000,
    minute = second * 60,
    hour = minute * 60,
    day = hour * 24;

  let event = "July 10, 2021 01:00:00",
    countDown = new Date(event).getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
        distance = countDown - now;

      document.getElementById("days").innerText = String(Math.floor(distance / (day))).padStart(2, '0'),
        document.getElementById("hours").innerText = String(Math.floor((distance % (day)) / (hour))).padStart(2, '0'),
        document.getElementById("minutes").innerText = String(Math.floor((distance % (hour)) / (minute))).padStart(2, '0'),
        document.getElementById("seconds").innerText = String(Math.floor((distance % (minute)) / second)).padStart(2, '0');

      //do something later when date is reached
      if (distance < 0) {
        let headline = document.getElementById("headline"),
          countdown = document.getElementById("countdown"),
          content = document.getElementById("content");


        countdown.style.display = "none";
        content.style.display = "block";

        clearInterval(x);
      }
      //seconds
    }, 0)
}());

.container {
  color: black;
  margin: 0 auto;
  text-align: center;
  font-family: "Nunito";
}

h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
}

li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
}

li span {
  display: block;
  font-size: 4.5rem;
}

@media all and (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  li {
    font-size: 1.125rem;
    padding: .85rem;
  }
  li span {
    font-size: 3.375rem;
  }
}

<div class="container" style="position: absolute;">
  <div id="countdown">
    <ul style="margin-top: -30px">
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>hours</li>
      <li><span id="minutes"></span>mins</li>
      <li><span id="seconds"></span>secs</li>
    </ul>
    <script src="script.js"></script>
  </div>
</div>

Add 2 digit numbers on javascript live timer

1 Answers1