URL скопирован в буфер обмена!
Как сделать таймер на Zero Block?
При помощи данной модификации можно создать таймер на Zero BLock в Тильда. Модификации имеет множество настроек, а при достижении нуля можно открыть свой popup, скролить до якоря или сделать редирект по ссылке.
Модификация обновлена. Появилась возможность разбить таймер на 4 части чтобы выводить отдельно дни, часы, минуты и секунды. Обновлена инструкция
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Ссылка для таймера
Зацикливание
Старт таймера
Формат таймера
Тип разделителя
Действие при достижении нуля
Настройки времени таймера
Дни
Часы
Минуты
Секунды
Ссылка для (День)
Ссылка для (Часы)
Ссылка для (Минуты)
Ссылка для (Секунды)
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD046--><script>
(function TiCode() {
var TiCodeTimer = document.querySelectorAll('a[href="#tc-timer"]');
TiCodeTimer.forEach(function (timerElement) {
timerElement.removeAttribute('href');
});
var TiDayLinks = document.querySelectorAll('a[href="#tc-day"]');
var TiHourLinks = document.querySelectorAll('a[href="#tc-hours"]');
var TiMinuteLinks = document.querySelectorAll('a[href="#tc-minutes"]');
var TiSecondLinks = document.querySelectorAll('a[href="#tc-seconds"]');
TiDayLinks.forEach(function (dayLink) {
dayLink.removeAttribute('href');
});
TiHourLinks.forEach(function (hourLink) {
hourLink.removeAttribute('href');
});
TiMinuteLinks.forEach(function (minuteLink) {
minuteLink.removeAttribute('href');
});
TiSecondLinks.forEach(function (secondLink) {
secondLink.removeAttribute('href');
});
var TiDays = 0;
var TiHours = 0;
var TiMinutes = 1;
var TiSeconds = 30;
var TiCodeTime;
var TiShowDays = true;
var TiShowHours = true;
var TiShowMinutes = true;
var TiShowSeconds = true;
var TiLoop = true;
var TiLocalStorage = true;
var TiTimerStopped = false;
if (TiLocalStorage) {
var savedTime = localStorage.getItem('TiCodeEndTime');
if (savedTime) {
TiCodeTime = parseInt(savedTime, 10);
} else {
resetTimer();
}
} else {
resetTimer();
}
var timer;
function updateTimer() {
var now = new Date().getTime();
var timeLeft = TiCodeTime - now;
if (timeLeft <= 0 && !TiTimerStopped) {
clearInterval(timer);
if (!TiRedirected) {
var tempElement = document.createElement('a');
tempElement.setAttribute('href', 'javascript:void(0);');
tempElement.style.display = 'none';
document.body.appendChild(tempElement);
tempElement.click();
document.body.removeChild(tempElement);
TiRedirected = true;
if (TiLocalStorage) {
localStorage.setItem('TiCodeRedirected', 'true');
}
}
if (TiLoop) {
resetTimer();
timer = setInterval(updateTimer, 1000);
}
} else {
var TiRemainingDays = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var TiRemainingHours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var TiRemainingMinutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var TiRemainingSeconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
var formattedTimer = '';
if (TiShowDays) formattedTimer += padNumber(TiRemainingDays) + ':';
if (TiShowHours) formattedTimer += padNumber(TiRemainingHours) + ':';
if (TiShowMinutes) formattedTimer += padNumber(TiRemainingMinutes) + ':';
if (TiShowSeconds) formattedTimer += padNumber(TiRemainingSeconds);
TiCodeTimer.forEach(function (timerElement) {
timerElement.textContent = formattedTimer;
});
if (TiShowDays) {
TiDayLinks.forEach(function (dayLink) {
dayLink.textContent = padNumber(TiRemainingDays);
});
}
if (TiShowHours) {
TiHourLinks.forEach(function (hourLink) {
hourLink.textContent = padNumber(TiRemainingHours);
});
}
if (TiShowMinutes) {
TiMinuteLinks.forEach(function (minuteLink) {
minuteLink.textContent = padNumber(TiRemainingMinutes);
});
}
if (TiShowSeconds) {
TiSecondLinks.forEach(function (secondLink) {
secondLink.textContent = padNumber(TiRemainingSeconds);
});
}
}
}
function padNumber(number) {
return number < 10 ? '0' + number : number;
}
function resetTimer() {
var endTime = new Date();
endTime.setDate(endTime.getDate() + TiDays);
endTime.setHours(endTime.getHours() + TiHours);
endTime.setMinutes(endTime.getMinutes() + TiMinutes);
endTime.setSeconds(endTime.getSeconds() + TiSeconds);
TiCodeTime = endTime.getTime();
TiRedirected = false;
if (TiLocalStorage) {
localStorage.setItem('TiCodeEndTime', TiCodeTime);
localStorage.removeItem('TiCodeRedirected');
}
}
var TiRedirected = localStorage.getItem('TiCodeRedirected') === 'true';
timer = setInterval(updateTimer, 1000);
document.getElementById("stopTimerButton").addEventListener("click", function () {
TiTimerStopped = true;
});
})();
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block текстовый элемент и назначаем ему ссылку #tc-timer Текст не важен, но лучше вместо заглушки написать 00:00:00:00 чтобы вам проще было адаптировать;
2. Указываем настройки в генераторе кода:
Ссылка для таймера - можно указать свою уникальную ссылку для таймера вместо #tc-timer. Если делаете несколько таймеров на одной странице с разными настройками, то ссылка всегда должна быть уникальная при генерации нового кода. Если таймеров на странице много и все они одинаковые, то можно указывать одинаковую ссылку всем элементам и использовать один код.
Зацикливание - включаем если нужно чтобы при достижении нуля, таймер перезапускался.
Старт таймера - два варианта старта таймера: "Раз при первом заходе" - таймер запускается при первом заходе на сайт и сохраняет время в кэш. Например если указали 10 минут и вышли с сайта на 2 минуты, то при повторном заходе на сайт, на таймере будет 8 минут. "Перезапуск при каждом заходе" - таймер будет делать сброс при каждом заходе или обновлении страницы. Например, если указали 10 минут и через минуту обновили страницу, то на таймере будет 10 минут.
Формат таймера - указываем какие данные нужно выводить. Можно отключить вывод дней, часов или минут.
Тип разделителя - указываем тип разделителя. Это может быть символ, слово или пробел.
Действие при достижении нуля - при достижении нуля можно открыть стандартный попап, popup на Zero Block, доскролить до якоря или сделать редирект по ссылке;
Разбить таймер на 4 части - если включить, то в зеро блоке вместо одного текстового элемента можно создать 4 отдельных и выводить в каждую из них только одну часть таймера. Например, в первый текст выводим часы, во второй минуты. Это добавляет гибкости при адаптации и кастомизации.
Ссылка для (День), Ссылка для (Часы), Ссылка для (Минуты), Ссылка для (Секунды) - при необходимости указываем свои ссылки которые будем добавлять в текст.
3. Указываем время в генераторе: Дни, часы, минуты, секунды. Если что-то из этого не нужно, указываем 0;
4. Копируем готовый код и вставляем в HTML блок Т123.
2. Указываем настройки в генераторе кода:
Ссылка для таймера - можно указать свою уникальную ссылку для таймера вместо #tc-timer. Если делаете несколько таймеров на одной странице с разными настройками, то ссылка всегда должна быть уникальная при генерации нового кода. Если таймеров на странице много и все они одинаковые, то можно указывать одинаковую ссылку всем элементам и использовать один код.
Зацикливание - включаем если нужно чтобы при достижении нуля, таймер перезапускался.
Старт таймера - два варианта старта таймера: "Раз при первом заходе" - таймер запускается при первом заходе на сайт и сохраняет время в кэш. Например если указали 10 минут и вышли с сайта на 2 минуты, то при повторном заходе на сайт, на таймере будет 8 минут. "Перезапуск при каждом заходе" - таймер будет делать сброс при каждом заходе или обновлении страницы. Например, если указали 10 минут и через минуту обновили страницу, то на таймере будет 10 минут.
Формат таймера - указываем какие данные нужно выводить. Можно отключить вывод дней, часов или минут.
Тип разделителя - указываем тип разделителя. Это может быть символ, слово или пробел.
Действие при достижении нуля - при достижении нуля можно открыть стандартный попап, popup на Zero Block, доскролить до якоря или сделать редирект по ссылке;
Разбить таймер на 4 части - если включить, то в зеро блоке вместо одного текстового элемента можно создать 4 отдельных и выводить в каждую из них только одну часть таймера. Например, в первый текст выводим часы, во второй минуты. Это добавляет гибкости при адаптации и кастомизации.
Ссылка для (День), Ссылка для (Часы), Ссылка для (Минуты), Ссылка для (Секунды) - при необходимости указываем свои ссылки которые будем добавлять в текст.
3. Указываем время в генераторе: Дни, часы, минуты, секунды. Если что-то из этого не нужно, указываем 0;
4. Копируем готовый код и вставляем в HTML блок Т123.
