JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<body>
        <div>Time Remaining <span id="remainingTime">21:00:00</span></div>
        
        <div class="cashback-timer">
          <div class="limited-offer__count" id="clockdiv">
            <div class="limited-offer__count-time">
              <span class="limited-offer__count-hour js-hours">00</span>
            </div>
            <div class="limited-offer__count-time">
              <span class="limited-offer__count-min js-minutes">01</span>
            </div>
            <div class="limited-offer__count-time">
              <span class="limited-offer__count-sec js-seconds">00</span>
            </div>
          </div>
        </div>
    </body>

JavaScript

function Timer(duration, display) 
{
    var timer = duration, hours, minutes, seconds;
    var interval = setInterval(function () {
        hours = parseInt((timer /3600)%24, 10)
        minutes = parseInt((timer / 60)%60, 10)
        seconds = parseInt(timer % 60, 10);        

			  // console.log(hours + '  ' + minutes + '  ' + seconds);
		
				hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(hours +":"+minutes + ":" + seconds);

				
        if (timer <= 0) {
            // timer = duration;
            console.log("Stope");
      			clearInterval(interval);
        }
        --timer;
    }, 1000);
}

jQuery(function ($) 
{
		var hours = parseInt($('.js-hours').text());
    var minutes = parseInt($('.js-minutes').text());
    var seconds = parseInt($('.js-seconds').text());
    
    
    if (hours === 0) {
    	hours = 1;
    }
    if (minutes === 0) {
    	minutes = 60;
    }
    if (seconds === 0) {
    	seconds = 60;
    }

    // var twentyFourHours = 21 * 60 * 60;
    // console.log(minutes);
    console.log(hours + '  ' + minutes + '  ' + seconds);
    var twentyFourHours = hours * minutes * seconds;
    var display = $('#remainingTime');
    Timer(twentyFourHours, display);
});