Timer

by Corentin Ballot

HTML

<div class="js-timer" data-end="1606460400000" style="max-width: 340px;border: 1px solid #000;padding: 24px 0;display: flex;flex-wrap:nowrap;justify-content:center;align-items: center;margin:0 auto;text-align:center;">
  <div class="js-timer_auto">
    <div class="js-timer_value"></div>
    <div class="js-timer_unit"></div>
  </div>
  <div>:</div>
  <div class="js-timer_auto">
    <div class="js-timer_value"></div>
    <div class="js-timer_unit"></div>
  </div>
  <div>:</div>
  <div class="js-timer_auto">
    <div class="js-timer_value"></div>
    <div class="js-timer_unit"></div>
  </div>
</div>

JavaScript

(function updateTimer() {
	for (const timer of document.querySelectorAll(".js-timer")) {
      const end = timer.dataset.end;
      const v = timer.querySelectorAll(".js-timer_auto")
      let rest = end - Date.now();
      
      // Plus de 3 jours restant
      if(rest > 259200000) {
      	// JOURS
        let days = Math.floor(rest/1000/60/60/24);
      	v[0].querySelector(".js-timer_value").innerHTML = days;
      	v[0].querySelector(".js-timer_unit").innerHTML = "Jours";
        rest = rest - days*1000*60*60*24;
        // HEURES
        let hours = Math.floor(rest/1000/60/60);
      	v[1].querySelector(".js-timer_value").innerHTML = hours;
      	v[1].querySelector(".js-timer_unit").innerHTML = "Heurs";
        rest = rest - hours*1000*60*60;
        // SECONDES
        let seconds = Math.floor((rest/1000)%60);
      	v[2].querySelector(".js-timer_value").innerHTML = seconds>9? seconds: "0" + seconds;
      	v[2].querySelector(".js-timer_unit").innerHTML = "Secondes";
        rest = rest - seconds*1000*60;
      }
      // Moins de 3 jours restant
      else {
      
      }
	}
  setTimeout(updateTimer, 100);
})();