Виджет обратного отсчета. Фотограф Константин Шамин

Виджет обратного отсчета

Иногда вам может понадобится запустить обратный отсчет до какого-либо события. Это может быть окончание акции, скидок или конкурса. В этом вам сможет помочь данный виджет

  • Дней
  • Часов
  • Минут
  • Секунд
🥳 🎉 🎂

Для этого вам необходимо добавить на страницу 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>

Моды для Wfolio.ru

Виджет обратного отсчета. Фотограф Константин Шамин

Меняем светлую тему на темную (или любую другую)

Виджет обратного отсчета. Фотограф Константин Шамин

Запрет индексации отдельной страницы

Виджет обратного отсчета. Фотограф Константин Шамин

Скрытие пунктов меню в зависимости от языка сайта

Виджет обратного отсчета. Фотограф Константин Шамин

Генератор случайных цифр

Виджет генератора случайных чисел. — задается диопазон «от» и «до»; — старт в один клик; — перебор других значений...
Виджет обратного отсчета. Фотограф Константин Шамин

Виджет. Кнопка сохранения контактов

Данный виджет генерирует vCard — электронную визитку и её QR-код. Визитка поддерживает: — ФИО, — род...
Виджет обратного отсчета. Фотограф Константин Шамин

Модицикация: выделение заголовка другим цветом

Иногда бывает необходимо выделить один или несколько заголовков другим цветом.
Виджет обратного отсчета. Фотограф Константин Шамин

Модификация пакетов услуг

Модификация блока с ценами на пакеты услуг с помощью CSS/JS: — выравнивание высоты блоков с пакетами услуг в версии...
Виджет обратного отсчета. Фотограф Константин Шамин

Модификация мультиссылок (taplink)

Модификация страницы с мультиссылкой с помощью CSS: — изменение отступов между кнопками; — изменение размера текста...
Виджет обратного отсчета. Фотограф Константин Шамин

Удаление сообщения о Cookie на отдельной странице

Если вы включили Cookie на сайте (Настройки — Разные настройки — Уведомление об использовании cookie (GDPR)),...
Виджет обратного отсчета. Фотограф Константин Шамин

Изменение цвета кнопок на отдельной странице

Виджет обратного отсчета. Фотограф Константин Шамин

Скрываем блок от Инстаграм

Виджет обратного отсчета. Фотограф Константин Шамин

Добавлние кнопок к форме обратной связи