Заготовки кода для Тильды

Разработка студии OWL Agency.
Для вопросов и предложений: e.ipatov@owlagency.ru или telegram.

Оглавление

• Структура репозитория
• Коллекция плагинов и библиотек
• • jQuery
• • Moment.js
• Коллекция заготовок кода
• • Таймер обратного отсчета

Структура репозитория

В папка /plugins/ хранятся плагины, которые используются в заготовках кода: jquery, moment.js и тд.
В остальных папках находятся заготовки кода, которые можно скачать и посмотреть, как работают.
Репозиторий развернут на домене tilda-examples.owl-dev.ru, чтобы быстро посмотреть заготовку и подтягивать подключать плагины с этого хоста(папка plugins), а не со сторонних ресурсов.

Коллекция плагинов и библиотек

jQuery

Версия 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>

Moment.js

Версия 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>