Как в Тильде добавить таймер в ZeroBlock

Вы сможете добавить таймер в текстовое поле или кнопку в ZeroBlock

  • как добавить обратный отсчет в тильде
  • таймер в тильде
  • тильда реализация обратного таймера
  • таймер на тильде
  • таймер тильда

Пример

Пример работает за счет обложки CR35
До 2028-го года осталось:
333д. 10ч. :30м. : 20с.

Инструкция


  1. Копируете скрипт в T123;
  2. Заполняете настройки*;
  3. Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
  4. Ставите обложку CR35;
  5. Выставляете в настройках время;
  6. Присваиваете обложке класс «uc-zero-timer»;
  7. В ZeroBlock выберите элемент куда бедет передаваться время;
  8. Присвойте, выбранному элементу класс «zero-timer»;
  9. Публикуйте страницу.

*Настройки помечены комментариями в коде.

Код примера

<!--
 * Name: Таймер обратного отсчета в ZeroBlock
 * Description: Скрипт добавляет вашу таймер в текстовое поле или кнопку в ZeroBlock
 * Author: ANKU
 * URL: https://anku.one/zero-timer
-->
<script>
const DAYS_SEPARATOR = 'd '; // Разделитель после дней
const HOUR_SEPARATOR = 'h '; // Разделитель после часов
const MINUTES_SEPARATOR = 'm '; // Разделитель после минут
const SECONDS_SEPARATOR = 's'; // Разделитель после секунд

// Не менять код ниже этого комментария
function initializeMyTimerZero(){function e(){var e,t,r,o;let n=document.querySelector(".uc-zero-timer .t415__days").textContent,i=document.querySelector(".uc-zero-timer .t415__hours").textContent,c=document.querySelector(".uc-zero-timer .t415__minutes").textContent,l=document.querySelector(".uc-zero-timer .t415__seconds").textContent,u=(e=n,t=i,r=c,o=l,e+DAYS_SEPARATOR+t+HOUR_SEPARATOR+r+MINUTES_SEPARATOR+o+SECONDS_SEPARATOR);document.querySelectorAll(".zero-timer .tn-atom").forEach(e=>{e.textContent=u})}e(),setInterval(e,1e3),console.log("Хочешь скрипт таймера в ZeroBlock для Tilda, смотри эту статью: https://anku.one/zero-timer ")}"loading"!==document.readyState?initializeMyTimerZero():document.addEventListener("DOMContentLoaded",function(){initializeMyTimerZero()});
</script>
<style>.uc-zero-timer {display: none!important;}</style>
Копировать код

Дополнение

Данный скрипт можно адаптировать под разные задачи, например выполнять какие-либо действия по истечению времени таймера, например скрывать элементы на страницах. Так же можно добавить динамические подписи, например, «дня», «дней», «минута», «минут», в зависимости от того, какое число сейчас стоит и т. д.

Если есть подобные задачи, пишите!
Made on
Tilda