Таймер обратного отсчета

Change class name on click in jQuery

by AJIEKCEU

HTML

<div class="timer-wrp" data-deadline="March 10 2022 09:56:00 GMT+0300">
  <div class="timer__ttl">Акция действительна</div>
  <div  class="countdown">
    <div class="countdown-number">
      <span class="days countdown-time"></span>
      <span class="countdown-text">Дней</span>
    </div>
    <div class="countdown-number">
      <span class="hours countdown-time"></span>
      <span class="countdown-text">Часов</span>
    </div>
    <div class="countdown-number">
      <span class="minutes countdown-time"></span>
      <span class="countdown-text">Минут</span>
    </div>
    <div class="countdown-number">
      <span class="seconds countdown-time"></span>
      <span class="countdown-text">Секунд</span>
    </div>
  </div>
</div>

<div class="timer-wrp" data-deadline="March 10 2022 09:56:00 GMT+0300">
  <div class="timer__ttl">Акция действительна</div>
  <div  class="countdown">
    <div class="countdown-number">
      <span class="days countdown-time"></span>
      <span class="countdown-text">Дней</span>
    </div>
    <div class="countdown-number">
      <span class="hours countdown-time"></span>
      <span class="countdown-text">Часов</span>
    </div>
    <div class="countdown-number">
      <span class="minutes countdown-time"></span>
      <span class="countdown-text">Минут</span>
    </div>
    <div class="countdown-number">
      <span class="seconds countdown-time"></span>
      <span class="countdown-text">Секунд</span>
    </div>
  </div>
</div>

CSS

.timer-wrp {
    margin: 0 auto 20px;
    display: block;
    text-align: center;
}
.timer__ttl {
	margin-bottom: 5px;
	font-weight: 700;
	text-align: center; 
 }

.countdown {
  font-size: 30px;
  font-size: 20px;
  font-weight: 700;
  line-height: 46px;
}

.countdown-number{
	display: inline-block;
	vertical-align: top;
	width: 60px;
	border: 1px solid #cfcfcf;
	text-align: center; 
  }

.countdown-time {
  padding: 15px;
  display: inline-block;
  color: red;
}

.countdown-text {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #000;
    margin: 5px 0;
}

.deadline-message{
  display: none;
  font-size: 24px;
  font-style: italic;
}

JavaScript

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}


function initializeClock(that, endtime) {
  var clock = that;
  var daysSpan = that.find(".days");
  var hoursSpan = that.find(".hours");
  var minutesSpan = that.find(".minutes");
  var secondsSpan = that.find(".seconds");
 	
   //console.log(daysSpan);
  function updateClock() {
    var t = getTimeRemaining(endtime);
    if (t.total <= 0) {
      /*document.getElementById("countdown").className = "hidden";
      document.getElementById("deadline-message").className = "visible";*/
      daysSpan.text(0);
      hoursSpan.text(0);
      minutesSpan.text(0);
      secondsSpan.text(0);
      
      clearInterval(timeinterval);
      return true;
    }
    
 		daysSpan.text(t.days);
    hoursSpan.text(("0" + t.hours).slice(-2));
    minutesSpan.text(("0" + t.minutes).slice(-2));
    secondsSpan.text(("0" + t.seconds).slice(-2));
    
    /*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);*/
  }
 
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}


//var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); // for endless timer
$('.timer-wrp').each(function(){
	var that = $(this),
  		thatDeadline = that.attr('data-deadline');
	initializeClock(that, thatDeadline);
});