Обратный отсчет с помощью jquery

Я работаю над обратным отсчетом, на самом деле он работает нормально, теперь я хочу добавить 0 из 0-9 одной цифры к каждой отдельной цифре, которую я хочу добавить 0. Теперь она идет с одной цифрой, например, 6 часов, я хочу быть 06 часов. Может ли кто-нибудь предложить мне.

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('July 17, 2019 00:00:00').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);
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
}

.popup-counter {
 display: flex;
 }

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class = "popup-counter">
  <div class = "counter-timings">
    <div class = "counter" id = "days"></div>
    <h4>Days</h4>
  </div>
  <div class = "counter-timings">
    <div class = "counter" id = "hours"></div>
    <h4>Hours</h4>
  </div>
  <div class = "counter-timings">
    <div class = "counter" id = "minutes"></div>
    <h4>Minutes</h4>
  </div>
  <div class = "counter-timings">
    <div class = "counter" id = "seconds"></div>
    <h4>Seconds</h4>
  </div>
</div>

javascript jquery html

30.05.2019 11:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

190

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте так.

Присвойте значения переменной и проверьте, меньше ли 10, добавьте ноль, прежде чем оставить как есть.

(hours < 10)?'0'+hours:hours,

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('July 17, 2019 00:00:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;
    var hours =  Math.floor((distance % (day)) / (hour));
    var days =  Math.floor(distance / (day));
    var minutes =  Math.floor((distance % (hour)) / (minute));
    var seconds =  Math.floor((distance % (minute)) / second);
    document.getElementById('days').innerText = (days < 10 )?'0'+days:days,
      document.getElementById('hours').innerText = (hours < 10)?'0'+hours:hours,
      document.getElementById('minutes').innerText = (minutes < 10)?'0'+minutes:minutes,
      document.getElementById('seconds').innerText = (seconds < 10)?'0'+seconds:seconds;
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
}

.popup-counter {
 display: flex;
 }

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class = "popup-counter">
  <div class = "counter-timings">
    <div class = "counter" id = "days"></div>
    <h4>Days</h4>
  </div>
  <div class = "counter-timings">
    <div class = "counter" id = "hours"></div>
    <h4>Hours</h4>
  </div>
  <div class = "counter-timings">
    <div class = "counter" id = "minutes"></div>
    <h4>Minutes</h4>
  </div>
  <div class = "counter-timings">
    <div class = "counter" id = "seconds"></div>
    <h4>Seconds</h4>
  </div>
</div>

Мохаммед Аладин, да, это то, что мне нужно, на самом деле я пробовал, как и вы, ниже условия, но я не добавлял условие в дом. Спасибо

— 30.05.2019 11:57

30.05.2019 11:50