Наверное вы не раз сталкивались с необходимостью установки таймера обратного отсчета на сайт. Сегодня мы расскажем как создать такой таймер обратного отсчета при помощи прогрессивного фреймверка Vue.js — JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов в парадигме реактивного программирования.  Легко интегрируется в проекты с использованием других JavaScript-библиотек, благодаря постепенно расширяемой экосистеме.

 

Наш таймер будет реализован при помощи данного фрейморка, но если вы хотите установить на сайт уже готовые шаблоны-заглушки то можете найти на сайте нашего партнера, там есть много бесплатных так и премиум предложений.

Шаг 1. HTML

Так как вся работа возложена на фреймворк, нам остается вызвать все функции:

Также мы подключили саму библиотеку Vue.js с репозитория, более детально можете просмотреть в исходниках.

Шаг 2. CSS

Начнем со стилей, до того как создать механику таймера нам необходимо его стилизовать, нам необходимо визуально реализовать эффект движение пластин, для начала выстраиваем их в одну линию:

Добавляем эффект гвоздей которыми прибиты пластины:

Затем стилизируем цифры, чтобы выглядели немного аккуратней:

Затем добавляем стили для подписей:

Осталось прикрутить адаптивность, чтобы таймер был более дружелюбным на различных устройствах:

Шаг 3. JS

За работу таймера будет отвечать следующий код, обратите внимание, если вам необходимо установить дату, делаем это в следующем пункте deadline: ‘Oct 5, 2021 20:45:00’:

На первый взгляд достаточно просто, но он выполняет свою функцию, что скажете друзья? оставляйте свое мнение в комментариях.

Вот и все. Готово!