Скрипт обратного отсчета в интервале дат, минут, секунд

Обратный отсчет с указанием не только конкретной даты, но и интервала времени, например, 15 минут, как в нашем примере

HTML:

<div id="clockdiv">
 <div>
 <span class="days"></span>
 <div class="smalltext">Дни</div>
 </div>
 <div>
 <span class="hours"></span>
 <div class="smalltext">Часы</div>
 </div>
 <div>
 <span class="minutes"></span>
 <div class="smalltext">Минуты</div>
 </div>
 <div>
 <span class="seconds"></span>
 <div class="smalltext">Секунды</div>
 </div>
</div>

JavaСкрипт:

<script type="text/javascript">
 //Скрипт обратного отсчета
 function getTimeRemaining(endtime) {
 const total = Date.parse(endtime) - Date.parse(new Date());
 const seconds = Math.floor((total / 1000) % 60);
 const minutes = Math.floor((total / 1000 / 60) % 60);
 const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
 const days = Math.floor(total / (1000 * 60 * 60 * 24));
 
 return {
 total,
 days,
 hours,
 minutes,
 seconds
 };
}
function initializeClock(id, endtime) {
 const clock = document.getElementById(id);
 const daysSpan = clock.querySelector('.days');
 const hoursSpan = clock.querySelector('.hours');
 const minutesSpan = clock.querySelector('.minutes');
 const secondsSpan = clock.querySelector('.seconds');
function updateClock() {
 const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
 hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
 minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
 secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
 clearInterval(timeinterval);
 }
 }
updateClock();
 const timeinterval = setInterval(updateClock, 1000);
}
const deadline = new Date(Date.parse(new Date()) + 15 * 60 * 1000); // устанавливаем обратный отсчет в интервале 15 минут
initializeClock('clockdiv', deadline);
</script>

Немного стилей CSS:

#clockdiv{
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 26px;
}

#clockdiv > div{
  padding: 10px;
  border-radius: 3px;
  background: #906f46;
  display: inline-block;
}

#clockdiv div > span{
  padding: 15px;
  border-radius: 3px;
  background: #292929;
  display: inline-block;
}

.smalltext{
  padding-top: 5px;
  font-size: 14px;
}

Заметки фрилансера

Скрипт обратного отсчета в интервале дат, минут, секунд