Иногда вам может понадобится запустить обратный отсчет до какого-либо события. Это может быть окончание акции, скидок или конкурса. В этом вам сможет помочь данный виджет
Дней Часов Минут Секунд
Для этого вам необходимо добавить на страницу HTML-блок, в который в свою очередь поместить данный код.
В самом верху кода находятся настройки, которые необходимо изменить:
- action_name — Название события
- action_end — Сообщение, которое будет появляться по его окончанию
- deadline — Дата до которой должен идти обратный отсчет в формате как в примере!
- Еще чуть ниже #ffd54f; — цвет фона
<script>
/* НАСТРОЙКИ */
var action_name = "До конца акции осталось:";
var action_end = "Акция закончилась! Спасибо за участие";
var deadline = "Dec 17, 2021 10:28:00";
</script>
<style>
#countdown_warp {
box-sizing: border-box;
height: 100%;
align-items: center;
background-color: #ffd54f; /* ЦВЕТ ФОНА */
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
padding: 40px 0 40px 0;
}
#countdown_warp .container {
color: #333;
margin: 0 auto;
text-align: center;
}
#countdown_warp h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
#countdown_warp ul {
padding:0;
}
#countdown_warp li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
#countdown_warp li span {
display: block;
font-size: 4.5rem;
}
#countdown_warp .message {
font-size: 4rem;
}
#countdown_warp #content {
display: none;
padding: 1rem;
}
#countdown_warp .emoji {
padding: 0 .25rem;
}
@media all and (max-width: 768px) {
#countdown_warp h1 {
font-size: 1.5rem;
}
#countdown_warp li {
font-size: 0.7rem;
padding: .75rem;
}
#countdown_warp li span {
font-size: 2.375rem;
}
}
</style>
<div id="countdown_warp">
<div class="container">
<h1 id="headline"><script>document.write(action_name)</script></h1>
<div id="countdown">
<ul>
<li><span id="days"></span><text id="days_text">Дней</text></li>
<li><span id="hours"></span><text id="hours_text">Часов</text></li>
<li><span id="minutes"></span><text id="minutes_text">Минут</text></li>
<li><span id="seconds"></span><text id="seconds_text">Секунд</text></li>
</ul>
</div>
<div class="message">
<div id="content">
<span class="emoji">🥳</span>
<span class="emoji">🎉</span>
<span class="emoji">🎂</span>
</div>
</div>
</div>
</div>
<script>
function num_word(value, words){
value = Math.abs(value) % 100;
var num = value % 10;
if(value > 10 && value < 20) return words[2];
if(num > 1 && num < 5) return words[1];
if(num == 1) return words[0];
return words[2];
}
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let deadline_count = deadline,
countDown = new Date(deadline_count).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("days_text").innerText = num_word(Math.floor(distance / (day)), ['день', 'дня', 'дней']),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("hours_text").innerText = num_word(Math.floor((distance % (day)) / (hour)), ['час', 'часа', 'часов']),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("minutes_text").innerText = num_word(Math.floor((distance % (hour)) / (minute)), ['минута', 'минуты', 'минут']),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second),
document.getElementById("seconds_text").innerText = num_word(Math.floor((distance % (minute)) / second), ['секунда', 'секунды', 'секунд']);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = action_end;
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
</script>
