Разработка студии OWL Agency.
Для вопросов и предложений: e.ipatov@owlagency.ru или telegram.
В папка /plugins/ хранятся плагины, которые используются в заготовках кода: jquery, moment.js и тд.
В остальных папках находятся заготовки кода, которые можно скачать и посмотреть, как работают.
Репозиторий развернут на домене tilda-examples.owl-dev.ru, чтобы быстро посмотреть заготовку и подтягивать подключать плагины с этого хоста(папка plugins), а не со сторонних ресурсов.
Версия 3.7.0
Библиотека для упрощения работы с js и dom-деревом элементов на html страницах.
Расположение /plugins/jquery-3.7.0.min.js
Подключение:
<script type="text/javascript" src="https://tilda-examples.owl-dev.ru/plugins/jquery-3.7.0.min.js"></script>
Версия 2.29.1
Библиотека для упрощения работы с датой и временем.
Расположение /plugins/moment-2.29.1.min.js
Подключение:
<script type="text/javascript" src="https://tilda-examples.owl-dev.ru/plugins/moment-2.29.1.min.js"></script>
Пример код находится в папке /timer_moment/
Рабочий пример кода тут: https://tilda-examples.owl-dev.ru/timer_moment/
Для использования кода нужно подключить библиотеки jQuery и Moment.js и добавить в верстку html-блоки с определенными классами, которые будут заполняться числами для обратного отсчета.
Код js для вставки в тильду находится тут: репозиторий/timer_moment/index.js
Для настроек работы кода можно использовать две переменные:
// дата, до которой выполняется отсчет
var date_go = moment('2023-07-03 10:29:00');
// скорость обновления таймера, задается в секундах
var updateIntervalSec = 1;
Для вывода оставшихся до заданной даты дней, часов, минут и секунд, на странице должны быть html-элементы с обязательными классами:
<!-- Пример блока вывода обратного отсчета -->
Осталось:
Дней: <span class="t-day"></span>
Часов: <span class="t-hours"></span>
Минут: <span class="t-min"></span>
Секунд: <span class="t-sec"></span>
Полный код, для копирования и вставки:
<!-- Пример блока вывода обратного отсчета -->
Осталось:
Дней: <span class="t-day"></span>
Часов: <span class="t-hours"></span>
Минут: <span class="t-min"></span>
Секунд: <span class="t-sec"></span>
<!-- Подключение библиотек-->
<script type="text/javascript" src="https://tilda-examples.owl-dev.ru/plugins/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="https://tilda-examples.owl-dev.ru/plugins/moment-2.29.1.min.js"></script>
<!-- Кода обратного отсчета -->
<script>
$(document).ready(function() {
// дата, до которой выполняется отсчет
var date_go = moment('2023-07-03 10:29:00');
// скорость обновления таймера, задается в секундах
var updateIntervalSec = 1;
// функция таймера обратного отсчета
function time(){
// расчет дней, часов, минут и секунд
var date_go_modify = moment.duration(date_go.diff(moment()));
var days = (date_go_modify.days() >= 0) ? date_go_modify.days() : 0;
var hours = (date_go_modify.hours() >= 0) ? date_go_modify.hours() : 0;
var minutes = (date_go_modify.minutes() >= 0) ? date_go_modify.minutes() : 0;
var seconds = (date_go_modify.seconds() >= 0) ? date_go_modify.seconds() : 0;
// элементы html, куда записываются значения
$('.t-day').html(days);
$('.t-hours').html(hours);
$('.t-min').html(minutes);
$('.t-sec').html(seconds);
}
// запуск таймера
time();
setInterval(time, updateIntervalSec * 1000);
});
</script>