Timer

by Corentin Ballot

HTML

<div class="js-timer" data-end="1606460400000">
  <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>

CSS

.js-timer {
  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;
}

.js-timer_auto {
  
}

.js-timer_value {
  
}

.js-timer_unit {
  
}

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);
})();