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

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

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

Для этого вам необходимо добавить на страницу 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)),...
Виджет обратного отсчета. Фотограф Константин Шамин

Создание папок из csv-списка

Еще один полезный для детских/школьных фотографов скрипт по массовому созданию папок из списка
Виджет обратного отсчета. Фотограф Константин Шамин

Скачиваем все CSV файлы проекта

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

Копирование файлов из списка избранного в отдельную папку

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

Таблица из CSV

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

Калькулятор цен

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

Добавление всплывающего title к фотографии