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

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

очки
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>

51.01%

Сообщение, комментарии, отзывы (0)




Разрешённые теги: <b><i><br>


© an article