JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="timer-counter-num"></div>

CSS

.is-done {
  color: green;
}

JavaScript

//TIMER
var min_miliseconds = 60 * 1000; // в минуте милисекунд
var hour_miliseconds = 60 * min_miliseconds; // в часе
var countdown = getStartTime();  //Время старта в мс
var $timer = $(".timer-counter-num");
var timer_value = [];
 
setTime();
var timerId = setInterval(function () {
    countdown -= 1000;
    if (countdown < 0) {
        $timer.addClass('is-done');
        clearInterval(timerId);
    } else {
        setTime();
    }
}, 1000);
 
function getStartTime() {
    var date = new Date();
    var hours = Math.abs(23 - date.getHours());
    var minutes = Math.abs(59 - date.getMinutes());
    var seconds = Math.abs(59 - date.getSeconds());
    // return getStartMiliseconds(hours, minutes, seconds);
    return getStartMiliseconds(0, 0, 10);
}
function getStartMiliseconds(hours, minutes, seconds) {
    return hour_miliseconds * hours + min_miliseconds * minutes + 1000 * seconds;
}
function setTime() {
    timer_value[0] = Math.floor(countdown / hour_miliseconds); // часы
    timer_value[1] = Math.floor( (countdown - timer_value[0]*hour_miliseconds) / min_miliseconds); // минуты
    timer_value[2] = Math.floor( (countdown - timer_value[0]*hour_miliseconds - timer_value[1]*min_miliseconds) / 1000); // секунды
 
    $.each(timer_value, function(index) {
        var value = this;
        console.log(value);
        if (value < 10) {
            timer_value[index] = '0' + value;
        }
    });
    $timer.html(timer_value.join(':'));
}