Простой таймер обратного отсчета на js (javascript)

#IT
final countdown timer javascript

Привет всем на просторах сети. Для одного из проектов понадобилось срочно разработать таймер обратного отсчета. Я вышел в интернет с этим вопросом и, нагуглив пару уроков, я смержил их в одно решение.

CSS:

<style>

.metaConte{position:absolute;display:flex;display:-webkit-flex;width:100%;height:100%;z-index:100;align-items:center;justify-content:center;}

:root{font-size:calc(.6vw + .6vh);}
.disNone{display:none;}
.countDown{color:#fff;}

.countDown div{display:flex;display:-webkit-flex;align-items:center;justify-content:center;}
.timer, .time{flex-direction:column;}
.timerTitle{text-transform:uppercase;font-size:3rem;}

.timerCont{width:100%;justify-content:space-around!Important;}

.time{width:20%;}
.time div:first-child{font-size:3rem;}

</style>

HTML:

<section class="metaConte">
<div id="countDown" class="countDown">
    <div class="timer">
        <div class="timerTitle">До повышения цен</div>
        <div class="timerCont">
            <div class="time">
                <div class="time-D"></div>
                <div class="timeTitle title-D"></div>
            </div>
            <div class="separ">:</div>
            <div class="time">
                <div class="time-H"></div>
                <div class="timeTitle title-H"></div>
            </div>
            <div class="separ">:</div>
            <div class="time">
                <div class="time-M"></div>
                <div class="timeTitle title-M"></div>
            </div>
            <div class="separ">:</div>
            <div class="time">
                <div class="time-S"></div>
                <div class="timeTitle title-S"></div>
            </div>
        </div>
    </div>
</div>
</section>

JavaScript:

<script>
    let date = new Date('Sept 1 2022 00:00:00');
    let now = new Date();
    let gapi = date - now;

    function declensionNum(num, words) {
        return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
    };

    function nn(nn){
        return nn > 9 ? "" + nn: "0" + nn;
    };
    
    function counts(){
        let nowi = new Date();
        gap = date - nowi;
        let days = Math.floor(gap / 1000  / 60 / 60 / 24);
        let hours = Math.floor(gap / 1000  / 60 / 60) % 24;
        let minutes = Math.floor(gap / 1000  / 60) % 60;
        let seconds = Math.floor(gap / 1000)  % 60;

        document.querySelector('.time-D').innerText = nn(days);
        document.querySelector('.time-H').innerText = nn(hours);
        document.querySelector('.time-M').innerText = nn(minutes);
        document.querySelector('.time-S').innerText = nn(seconds);
        
        document.querySelector('.title-D').innerText = declensionNum(days, ['день', 'дня', 'дней']);
        document.querySelector('.title-H').innerText = declensionNum(hours, ['час', 'часа', 'часов']);
        document.querySelector('.title-M').innerText = declensionNum(minutes, ['минута', 'минуты', 'минут']);
        document.querySelector('.title-S').innerText = declensionNum(seconds, ['секунда', 'секунды', 'секунд']);

    };

    function displayNone(){
        let timerBody = document.getElementById('countDown');
        timerBody.classList.add('disNone');
    };

if (gapi > 0){
    counts();
    setInterval(counts, 1000);
} else {
    displayNone();
};

</script>

© an article
Содержимое данного сайта (включая размещенную информацию и материалы) охраняется авторским правом (ст. 1271 ГК РФ). Запрещено копирование дизайна настоящего сайта, его структуры и отдельных элементов без предварительного письменного согласия