Таймер обратного отсчёта на чистом JavaScript
В этой статье рассмотрим таймер обратного отсчета, построенный на чистом CSS и JavaScript. Он написан с использованием минимального количества кода без использования jQuery и каких-либо других сторонних библиотек.
Таймеры обратного отсчёта могут использоваться на сайтах для различных целей. Но в большинстве случаев они применяются для отображения времени, которое осталось до наступления какого-то крупного события: запуска нового продукта, рекламной акции, начала распродажи и т.д.
Демо таймера обратного отсчёта
Простой таймер обратного отсчета с днями, часами, минутами и секундами. Очень легко настраивается. Создан на чистом CSS и Javascript (без зависимостей).
Подключение и настройка таймера
1. Вставить в нужное место страницы html-разметку таймера:
00 00 00 00 Таймер обратного отсчета отображает четыре числа: дни, часы, минуты и секунды. Каждое число находится в элементе . Первый класс ( timer__item ) используется для стилизации элемента, а второй — для таргетинга в JavaScript.
2. Добавить стили (базовое оформление):
.timer__items { display: flex; font-size: 48px; } .timer__item { position: relative; min-width: 60px; margin-left: 10px; margin-right: 10px; padding-bottom: 15px; text-align: center; } .timer__item::before { content: attr(data-title); display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 14px; } .timer__item:not(:last-child)::after { content: ':'; position: absolute; right: -15px; }Стилизовать таймер обратного отсчета можно так как вы этого хотите.
Вышеприведённый CSS использует flexbox. Знак «:» и текст под каждым компонентом даты выводиться на страницу с помощью псевдоэлементов.
3. Добавить JavaScript:
JavaScript
document.addEventListener('DOMContentLoaded', function() { // конечная дата, например 1 июля 2021 const deadline = new Date(2021, 06, 01); // id таймера let timerId = null; // склонение числительных function declensionNum(num, words) { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; } // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов function countdownTimer() { const diff = deadline - new Date(); if (diff 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0; $days.textContent = days < 10 ? '0' + days : days; $hours.textContent = hours < 10 ? '0' + hours : hours; $minutes.textContent = minutes < 10 ? '0' + minutes : minutes; $seconds.textContent = seconds < 10 ? '0' + seconds : seconds; $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']); $hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']); $minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']); $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']); } // получаем элементы, содержащие компоненты даты const $days = document.querySelector('.timer__days'); const $hours = document.querySelector('.timer__hours'); const $minutes = document.querySelector('.timer__minutes'); const $seconds = document.querySelector('.timer__seconds'); // вызываем функцию countdownTimer countdownTimer(); // вызываем функцию countdownTimer каждую секунду timerId = setInterval(countdownTimer, 1000); });4. Установить дату окончания. Например, до 1 июля 2021:
JavaScript
// конечная дата const deadline = new Date(2021, 06, 01);Структура кода JavaScript
Основную часть кода занимает функция countdownTimer :
JavaScript
function countdownTimer() { // . }Эта функция выполняет расчёт оставшегося времени и обновляет содержимое элементов .timer__item на странице.
Расчёт оставшегося времени осуществляется посредством вычитания текущей даты из конечной:
JavaScript
// new Date() - текущая дата и время const diff = deadline - new Date();Вычисление оставшегося количества дней, часов, минут и секунд выполняется следующим образом:
JavaScript
const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;Встроенная функция Math.floor используется для округления числа до ближайшего целого (посредством отбрасывания дробной части).
Вывод оставшегося времени на страницу:
JavaScript
$days.textContent = days < 10 ? '0' + days : days; $hours.textContent = hours < 10 ? '0' + hours : hours; $minutes.textContent = minutes < 10 ? '0' + minutes : minutes; $seconds.textContent = seconds < 10 ? '0' + seconds : seconds; $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']); $hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']); $minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']); $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']);Переменные $days , $hours , $minutes , $seconds содержат элементы (таргеты), в которые выводятся компоненты времени.
Изменение содержимого элементов выполняется через textContent . Если значение меньше 10, то к нему добавляется символ «0».
Получение элементов (выполняется с помощью querySelector ):
JavaScript
// получаем элементы, содержащие компоненты даты const $days = document.querySelector('.timer__days'); const $hours = document.querySelector('.timer__hours'); const $minutes = document.querySelector('.timer__minutes'); const $seconds = document.querySelector('.timer__seconds');Функция declensionNum используется для склонения числительных:
JavaScript
// склонение числительных function declensionNum(num, words) { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; }Для постоянного вычисления оставшегося времени и вывода его на страницу используется setInterval .
Хранение идентификатора таймера осуществляется в переменной timerId :
JavaScript
// id таймера let timerId = null;Использование setInterval для запуска функции countdownTimer каждую секунду:
JavaScript
// вызываем функцию countdownTimer каждую 1 секунду timerId = setInterval(countdownTimer, 1000);Остановка таймера по истечении времени выполняется в функции countdownTimer :
JavaScript
function countdownTimer() { . if (diff Скрипт для создания нескольких таймеров отчета на странице
Скрипт, написанный с использованием классов, который можно использовать для создания нескольких таймеров отчета на странице:
JavaScript
// класс для создание таймера обратного отсчета class CountdownTimer { constructor(deadline, cbChange, cbComplete) { this._deadline = deadline; this._cbChange = cbChange; this._cbComplete = cbComplete; this._timerId = null; this._out = { days: '', hours: '', minutes: '', seconds: '', daysTitle: '', hoursTitle: '', minutesTitle: '', secondsTitle: '' }; this._start(); } static declensionNum(num, words) => { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; } _start() { this._calc(); this._timerId = setInterval(this._calc.bind(this), 1000); } _calc() { const diff = this._deadline - new Date(); const days = diff >0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0; this._out.days = days < 10 ? '0' + days : days; this._out.hours = hours < 10 ? '0' + hours : hours; this._out.minutes = minutes < 10 ? '0' + minutes : minutes; this._out.seconds = seconds < 10 ? '0' + seconds : seconds; this._out.daysTitle = CountdownTimer.declensionNum(days, ['день', 'дня', 'дней']); this._out.hoursTitle = CountdownTimer.declensionNum(hours, ['час', 'часа', 'часов']); this._out.minutesTitle = CountdownTimer.declensionNum(minutes, ['минута', 'минуты', 'минут']); this._out.secondsTitle = CountdownTimer.declensionNum(seconds, ['секунда', 'секунды', 'секунд']); this._cbChange ? this._cbChange(this._out) : null; if (diff Пример использования класса CountdownTimer() для создания таймера на странице:
JavaScript
// 1. Получим элементы в которые нужно вывести оставшееся количество дней, часов, минут и секунд const elDays1 = document.querySelector('.timer-1 .timer__days'); const elHours1 = document.querySelector('.timer-1 .timer__hours'); const elMinutes1 = document.querySelector('.timer-1 .timer__minutes'); const elSeconds1 = document.querySelector('.timer-1 .timer__seconds'); // 2. Установим время, например, на одну минуту от текущей даты const deadline1 = new Date(Date.now() + (60 * 1000 + 999)); // 3. Создадим новый объект, используя new CountdownTimer() new CountdownTimer(deadline1, (timer) => { elDays1.textContent = timer.days; elHours1.textContent = timer.hours; elMinutes1.textContent = timer.minutes; elSeconds1.textContent = timer.seconds; elDays1.dataset.title = timer.daysTitle; elHours1.dataset.title = timer.hoursTitle; elMinutes1.dataset.title = timer.minutesTitle; elSeconds1.dataset.title = timer.secondsTitle; }, () => { document.querySelector('.timer-1 .timer__result').textContent = 'Таймер завершился!'; });В new CountdownTimer() необходимо передать следующие аргументы:
- конечную дату в формате Date;
- функцию, которую нужно выполнять каждую секунду (её, например, можно использовать для обновления содержимого элементов, которые используются для отображения оставшегося времени);
- при необходимости функцию, которую нужно выполнить после завершения таймера.
HTML код первого таймера:
00 00 00 00 Инициализация остальных таймеров на странице с помощью new CountdownTimer() выполняется аналогично.
Пример страницы, на которой имеется несколько таймеров обратного отсчёта:
Как сделать таймер в html
Добавь plugin Таймер обратного отсчета на сайт HTML без написания кода и без головной боли
Если ваш веб-сайт HTML запущен и работает, вы преодолели первую серьезную проблему на пути к расширению присутствия своего бизнеса в интернете. поздравляю!
Но дальше идет a big question: как attract, engage, convert и поддержать больше посетителей? Поскольку в сети больше HTML сайтов и больше предприятий coming, чем ever before, конкуренция составляет fierce. В то же время современные посетители ежедневно получают более 5000 впечатлений от брендов. Чем ваш бизнес выделяется из толпы?
Добавление Таймер обратного отсчета plugin - это time-tested метод увеличения взаимодействия с пользователем и конверсии , который часто recommended веб-профессионалами считается лучшим методом для supercharging x сайт.
Некоторые компании сначала attempt делают все своими руками (diy) Таймер обратного отсчета или имеют «web guy», который утверждает, что он / она может построить Таймер обратного отсчета in 'no time'.
Другие пытаются найти приложения с открытым исходным кодом Таймер обратного отсчета или overseas companies, которые seem to предлагают Таймер обратного отсчета приложения on the super cheap.
К сожалению, помимо первоначальной стоимости этих подходов, со временем они часто становятся катастрофическими. Например, в то время как Таймер обратного отсчета может нормально выглядеть на вашем компьютере, для посетителей мобильного устройства или другого веб-браузера Таймер обратного отсчета может казаться непривлекательным, искаженным или даже не отображаться вообще.
Кроме того, настройка и обновление Таймер обратного отсчета требует еще больше времени и может вызвать новые проблемы или ошибки.
По мере роста вашей компании вы, вероятно, столкнетесь с проблемами безопасности, поскольку хакеры могут попытаться использовать Таймер обратного отсчета уязвимости в системе безопасности.
По мере роста посещаемости сайта повышенная нагрузка может вызвать проблемы с отображением Таймер обратного отсчета. Нет ничего хуже, чем Таймер обратного отсчета crashing на видном месте, как и ваш трафик skyrockets благодаря кампании successful!
Поскольку веб-технологии evolve, пользовательские и собственные Таймер обратного отсчета приложения потребуют больше времени и средств от bringing in вашего «веб-мастера», чтобы обновить ваш сайт и сохранить его working.
Вот почему большинство серьезных компаний выбирают профессиональные HTML Таймер обратного отсчета решения, такие как powr.
Для начала powr Таймер обратного отсчета для HTML предлагает интуитивно понятную настройку, которая может быть выполнена без кода. Запатентованный редактор powr editor позволяет настраивать wysiwyg (то, что вы видите, то и получаете), позволяя вам делать Таймер обратного отсчета обновления в реальном времени на вашей действующей странице HTML.
Легко настраиваемый
Каждая деталь, такая как шрифты, цвета, границы и интервалы, может customized сделать ваш бренд индивидуальным pop.
Мобильный Отзывчивый
Дизайн автоматически адаптируется и выглядит great на любом мобильном устройстве, планшете или в веб-браузере.
Кодирование не требуется
Просто скопируйте и вставьте его на свой HTML веб-сайт.
Поскольку powr рассчитан на масштабирование, он имеет самые передовые встроенные средства безопасности и доступные возможности большого объема.
and to top it off, доступна служба поддержки 24/7, as well as a справочный центр .
Кроме того, наша команда опытных инженеров работает круглосуточно, чтобы приложения powr, такие как ваш HTML Таймер обратного отсчета, работали на вас.
Встраивание приложения Таймер обратного отсчета на ваш сайт HTML никогда не было проще
Создайте свое собственное приложение Таймер обратного отсчета HTML, подберите стиль и цвета своего веб-сайта и добавьте Таймер обратного отсчета на свою страницу HTML, пост, боковую панель, нижний колонтитул или где угодно на своем сайт.
Создайте свой Таймер обратного отсчета
Скопировать и вставить
Посмотрите на ваш POWr Таймер обратного отсчета
most importantly, powr Таймер обратного отсчета имеет proven результатов. тематические исследования показали, что конверсии от powr Таймер обратного отсчета до boost превышают 30%!
Т
1200348
Установок Таймер обратного отсчета
8230145
POWR ПЛАГИНЫ НА САЙТАХ
Просто
Легко ориентироваться для нетехнического человека, как я. перепробовал так много приложений, и это лучшее сочетание отличных функций для любого магазина.
Пасар Сегар | Свежий рынок в Form Builder
Это приложение было бесшовным
Это помогло мне привлечь трафик на мой сайт и привлечь больше платформ! я очень рекомендую всем!
Я действительно наслаждаюсь этим приложением до сих пор
Я был удивлен, что shopify не имеет встроенной функции для чего-то подобного, но рад, что ваше приложение отвечает всем требованиям.
Если вы все еще aren't sure, то take a look at то, что есть у rbia shades, компании по производству солнцезащитных очков, makes ручной работы в деревянных рамах, been able to accomplish.
Через несколько месяцев после launching своего бизнеса на местных ярмарках и ремесленных выставках rbia shades искала способ продавать товары в интернете. они needed to be able, чтобы показать посетителям качество своего продукта, свой легкий и эргономичный дизайн в привлекательной визуальной форме. их html не предоставили для этого адекватного решения. они попробовали few different solutions, прежде чем нашли powr slider, и ни один из них не выглядел как часть сайта, был неуклюжим и трудным в использовании.
За a short time подписку с помощью всплывающего окна powr они смогли increase расширить свои контакты более чем на 250% (более 600 реальных контактов) и continuously расширили свои социальные сети до более 6000 подписчиков, использующих powr social кормить на их сайте. они added powr slider как визуальный способ быстро показать своим клиентам, поскольку они являются entering домашней страницей, как продукты выглядят в реальной жизни. он хорошо демонстрирует их продукты и беспрепятственно дает клиентам отличный опыт работы на месте. фактически они found, что посетители, которые взаимодействовали с приложениями powr на их сайте, были вовлечены в 2,5 раза дольше, чем любой другой человек на их сайте.
Начать бесплатно
вы manage сайты для клиентов и взимаете ли плату за хостинг?
тогда вы бы happy знали, что пользователи агентств, такие как ondesign, сообщили о 100% времени безотказной работы и сэкономили tons часов каждую неделю благодаря возможности create клиентских приложений за считанные минуты. .
Всего одна учетная запись powr дает вам access to каждое приложение в нашем suite.
instantly использует более 60 приложений, таких как каналы социальных сетей, каналы instagram, всплывающие окна, конструктор контактных форм, таймеры обратного отсчета, часто задаваемые вопросы, аккордеон, галерею, слайд-шоу, lookbook и другие, для безупречной конверсии целевой страницы и обслуживания клиентов. приложения powr integrate на многих платформах, таких как mail chimp, youtube, vimeo, facebook, instagram, twitter, pinterest и др.!
А
После того, как вы привлечете посетителей на свой сайт, нужно important получить их контактную информацию. это называется сбором лидов. есть много приложений powr, которые могут помочь вам сделать это на вашем веб-сайте html, и самое главное, вы можете get started сегодня бесплатно. давайте посмотрим на три самых популярных приложения для лидогенерации.
конструктор форм powr
form builder - это приложение powerful, которое имеет множество функций и интеграций, которые помогут вам. собирайте электронные письма и номера телефонов с полями verified. если вам нужно собрать много информации, вы можете добавить многоэтапную функциональность, чтобы увеличить количество отправок форм. полностью design ваша форма, чтобы соответствовать вашему brand. вы также можете принимать платежи через paypal и stripe и даже allow for офлайн-платежи, например наличными или чеками. возможности поистине безграничны, и самое главное, вы можете попробовать powr form builder бесплатно уже сегодня!
всплывающее окно powr
легко и быстро collect контактирует с помощью всплывающего окна на вашем сайте. start, выбрав template, который вы хотите использовать. вы можете offer получить скидку или попробовать забавное вращение, чтобы выиграть всплывающее окно, чтобы побудить посетителей оставить свою электронную почту. добавьте настраиваемые триггеры во всплывающее окно и show по истечении определенного времени, когда посетитель находится на вашем сайте, или show всплывающее окно, когда они начинают покидать ваш сайт и показывают намерение выхода. automatically отправлять ответ по электронной почте, когда кто-то заполняет вашу форму, или перенаправлять их на страницу custom вашего сайта. integrate всплывающее окно для google таблиц и mailchimp одним нажатием кнопки. попробуйте popup сегодня!
powr facebook чат
sometimes посетитель вашего сайта может задать simple вопрос, на который ему нужно ответить. convert этих посетителей в потенциальных клиентов, предлагая мгновенный чат function на вашем сайте через facebook messenger. значок чата будет appear на вашем сайте, чтобы любой посетитель мог нажать на него и write to вы. вы можете add анимировать, настроить взаимодействие с вашим брендом и многое другое. чат facebook можно настроить на вашем HTML веб-сайте всего за несколько minutes. начать сейчас!
От 250% boost новых потенциальных клиентов до 100% времени безотказной работы для customers, powr heroes увидели enormous преимуществ. одно даже stated, что они сэкономили 50% своего management времени , это сотни часов в год. другой герой powr stated стабильно растет на social media на 200%.
А
Теперь, когда у вас есть collected лидов, пора превратить их в платежеспособных клиентов. есть много способов сделать это, и powr может помочь вам с several различными приложениями для maximize конверсий на вашем html веб-сайте.
таймер обратного отсчета powr
один из способов помочь превратить потенциальных клиентов в клиентов - дать им sense fomo или бояться упустить. с creating ощущением срочности, например, из-за ограниченного запаса или ограниченного времени продажи, вы призываете своих потенциальных клиентов к действию. используйте таймер обратного отсчета, чтобы create в этом помочь, отсчитывая до certain даты или времени. вы можете сбросить таймер для каждого посетителя, чтобы показать ограниченное время контакту certain, и он не будет запускаться заново, если они вернутся на сайт. as always, все приложения powr настраиваются, и это приложение ничем не отличается. вы также можете change анимировать, чтобы сделать свой таймер более noticeable. even используйте таймер обратного отсчета powr для подсчета социальных доказательств. попробуйте таймер обратного отсчета и start конвертируйте потенциальных клиентов уже сегодня!
социальная лента powr
show ваши каналы социальных сетей размещаются на вашем HTML веб-сайте, чтобы fresh content оставалось на ваших страницах. вы можете show размещать сообщения в красивом макете галереи или можете use использовать слайдер. добавьте эффекты fun, например лайтбоксы с наложением на них курсора мыши. показывайте подписи, отметки "нравится" и комментарии directly на своем сайте, чтобы посетители quickly могли найти вас в интернете. вы даже можете сделать свой канал доступным для покупок, добавив connecting страниц продуктов и вариантов ваших сообщений. click удобная кнопка для контента и begin использование social feed для демонстрации ваших instagram, facebook, pinterest, youtube, twitter и других каналов уже сегодня! начни бесплатно здесь.
слайдер отзывов powr
testimonials ваших продуктов или услуг для imperative ваших потенциальных клиентов. большинство людей are wondering, что другие думают о вашем продукте перед покупкой, и слайдер - отличный способ продемонстрировать ваши top отзывы. используйте ползунок "отзывы", чтобы happy отзывы ваших клиентов занимали видное место на вашем HTML веб-сайте, simply встроенных в любую страницу. вы можете create аватары или изображения, показывающие реальных клиентов и способствующие укреплению доверия у посетителей вашего веб-сайта. создавайте переходы между характеристиками и create анимацией, чтобы привлечь к ним больше внимания на своем сайте. read подробнее о слайдере отзывов.
Как создать таймер на сайт с помощью HTML, CSS и JavaScript
В статье рассказывается, как создать таймер на сайт, используя только HTML, CSS и JavaScript. Вот что мы хотим получить:
Основные функции таймера:
- Отображение оставшегося времени.
- Преобразование времени в формат MM:SS.
- Изменение цвета, когда оставшееся время приближается к нулю.
- Отображение оставшегося времени в виде анимированного кольца.
Шаг 1. Начните с базовой разметки и стилей
Мы добавим svg с элементом circle внутри, чтобы нарисовать кольцо таймера. А также добавим интервал, чтобы показать оставшееся значение времени. Для этого мы вставляем JavaScript в HTML и включаем в DOM, указывая элемент #app.
document.getElementById("app").innerHTML = ` `;
Далее используем CSS, чтобы:
- Установить размер таймера обратного отсчета.
- Удалить заливку и обводку из элемента круга.
- Установить ширину и цвет кольца.
/* Устанавливаем высоту и ширину контейнера */ .base-timer < position: relative; height: 300px; width: 300px; >/* Удаляем стили SVG, которые могли бы скрыть временную метку */ .base-timer__circle < fill: none; stroke: none; >/* Контур SVG, который отображает прогресс времени */ .base-timer__path-elapsed
В результате мы получили шаблон, который выглядит следующим образом.
Шаг 2. Настройка временной метки
HTML-код содержит пустой элемент для отображения оставшегося время. Мы добавим сюда соответствующее значение в формате MM:SS с помощью метода formatTimeLeft.
function formatTimeLeft(time) < // Наибольшее целое число меньше или равно результату деления времени на 60. const minutes = Math.floor(time / 60); // Секунды – это остаток деления времени на 60 (оператор модуля) let seconds = time % 60; // Если значение секунд меньше 10, тогда отображаем его с 0 впереди if (seconds < 10) < seconds = `0$`; > // Вывод в формате MM:SS return `$:$`; >
После этого мы используем только что созданный метод в шаблоне.
document.getElementById("app").innerHTML = ` $ `
Чтобы вывести значение внутри кольца, нужно обновить стили.
// Начинаем с исходного значения в 20 секунд const TIME_LIMIT = 20; // Изначально осталось полное время интервала, но оно будет отсчитываться // и вычитаться из TIME_LIMIT let timePassed = 0; let timeLeft = TIME_LIMIT;
Теперь заставим таймер отсчитывать от 20 до 0.
Шаг 3: Обратный отсчет
У нас есть значение timeLimit, которое представляет собой начальное время. А также значение timePassed, которое указывает, сколько времени прошло с момента начала отсчета.
Увеличим значение timePassed на секунду и пересчитаем timeLeft с помощью функции setInterval . Для этого реализуем метод startTimer, который будет:
- Устанавливать интервал счетчика.
- Увеличивать значение timePassed каждую секунду.
- Пересчитывать значение timeLeft.
- Обновлять значение метки в шаблоне.
Сохраним ссылку на этот объект интервала в переменной timerInterval, чтобы очистить его при необходимости.
let timerInterval = null; document.getElementById("app").innerHTML = `. ` function startTimer() < timerInterval = setInterval(() =>< // Количество времени, которое прошло, увеличивается на 1 timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; // Обновляем метку оставшегося времени document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft); >, 1000); >
У нас есть метод, который запускает таймер обратного отсчета. С его помощью запустим таймер.
document.getElementById("app").innerHTML = `. ` startTimer();
Теперь таймер отсчитывает время. Реализуем изменение цвета временной метки при различных значениях.
Шаг 4: Перекрываем кольцо таймера другим кольцом
Чтобы визуализировать отсчет времени, добавим к кольцу второй слой, который будет обрабатывать анимацию. Для этого расположим новое зеленое кольцо поверх оригинального, чтобы получился своего рода индикатор выполнения.
Сначала добавим элемент path в SVG.
document.getElementById("app").innerHTML = ` $ `;
После этого добавим несколько стилей, чтобы круговая траектория выглядела как оригинальное серое кольцо. Важно, чтобы свойство stroke-width принимало значение, равное размеру исходного кольца. А также чтобы длительность transition была установлена на 1 секунду.
.base-timer__path-remaining < /* Такая же ширина, что и у исходного кольца */ stroke-width: 7px; /* Замыкаем концы линии, чтобы создать круг */ stroke-linecap: round; /* Делаем так, чтобы анимация начиналась вверху */ transform: rotate(90deg); transform-origin: center; /* Одна секунда подгоняется под таймер обратного отсчета */ transition: 1s linear all; /* Задаем смену цвета кольца, когда обновляется значение цвета */ stroke: currentColor; >.base-timer__svg < /* Переворачиваем кольцо и задаем движение анимации слева направо */ transform: scaleX(-1); >
Но кольцо таймера пока не анимируется.
Для анимации линии оставшегося времени мы будем использовать свойство stroke-dasharray.
Шаг 5. Анимация кольца прогресса
Посмотрим, как будет выглядеть кольцо с различными значениями stroke-dasharray.
Свойство stroke-dasharray делит оставшееся кольцо времени на отрезки равной длины. Это происходит, когда мы задаем stroke-dasharray число от 0 до 9.
Посмотрим, как это свойство будет себя вести, если передать ему два значения: 10 и 30.
stroke-dasharray: 10 30
Это устанавливает длину первой секции (оставшегося времени) на 10, а второй секции (прошедшего времени) – на 30. Мы можем использовать это в нашем таймере обратного отсчета.
Нужно, чтобы кольцо покрыло всю окружность. То есть, оставшееся время равно длине окружности кольца.
Вычислить длину дуги можно по следующей формуле:
Length = 2πr = 2 * π * 45 = 282,6
Это значение используется при первоначальном наложении кольца.
stroke-dasharray: 283 283
Первое значение в массиве – это оставшееся время, а второе – прошедшее. Теперь нам нужно манипулировать первым значением. Вот что произойдет, когда изменяется первое значение.
Создадим метод для подсчета оставшейся доли начального времени. Еще один – для вычисления значения stroke-dasharray и обновление элемента , представляющего оставшееся время.
// Делим оставшееся время на определенный временной лимит function calculateTimeFraction() < return timeLeft / TIME_LIMIT; >// Обновляем значение свойства dasharray, начиная с 283 function setCircleDasharray() < const circleDasharray = `$<( calculateTimeFraction() * FULL_DASH_ARRAY ).toFixed(0)>283`; document .getElementById("base-timer-path-remaining") .setAttribute("stroke-dasharray", circleDasharray); >
Также необходимо обновлять контур каждую секунду. Для этого вызовем метод setCircleDasharray внутри timerInterval.
function startTimer() < timerInterval = setInterval(() =>< timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft); setCircleDasharray(); >, 1000); >
Но анимация отстает на 1 секунду. Когда мы достигаем 0, все еще виден кусочек кольца.
Эту проблему можно решить, постепенно уменьшая длину кольца во время обратного отсчета в методе calculateTimeFraction.
function calculateTimeFraction() < const rawTimeFraction = timeLeft / TIME_LIMIT; return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction); >
Шаг 6: Изменение цвета в определенные моменты времени
Сначала добавим два порога, которые будут указывать, когда нужно добавить цвета для каждого из состояний. Начинаем с зеленого, затем переходим к оранжевому (в качестве предупреждения), а затем к красному, когда время почти истекло.
// Оповещение на 10 секунде const WARNING_THRESHOLD = 10; // Предупреждение на 5 секунде const ALERT_THRESHOLD = 5; const COLOR_CODES = < info: < color: "green" >, warning: < color: "orange", threshold: WARNING_THRESHOLD >, alert: < color: "red", threshold: ALERT_THRESHOLD >>;
Теперь создадим метод, который будет отвечать за проверку превышения установленного порога и изменение цвета.
function setRemainingPathColor(timeLeft) < const < alert, warning, info >= COLOR_CODES; // Если оставшееся время меньше или равно 5, удаляем класс "warning" и применяем класс "alert". if (timeLeft else if (timeLeft >
Мы удаляем один класс CSS, когда таймер обратного отсчета достигает определенной точки, и добавляем вместо него другой. Объявим эти классы.
.base-timer__path-remaining.green < color: rgb(65, 184, 131); >.base-timer__path-remaining.orange < color: orange; >.base-timer__path-remaining.red
Все готово. Ниже приводится полная демо-версия:
Как сделать - Таймер обратного отсчета
Узнать, как создать таймер обратного отсчета с помощью JavaScript.
Создание таймера обратного отсчета
Пример
// Установите дату, до которой мы ведем обратный отсчет
var countDownDate = new Date("July 15, 2021 04:00:00"").getTime();
// Обновляйте обратный отсчет каждые 1 секунду
var x = setInterval(function()
// Получить сегодняшнюю дату и время
var now = new Date().getTime();
// Найти расстояние между сейчас и датой обратного отсчета
var distance = countDownDate - now;
// Расчет времени по дням, часам, минутам и секундам
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Отображение результата в элементе с помощью > document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// Если обратный отсчет завершен, напишите текст
if (distance < 0) clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
>
>, 1000);
Совет: Узнать больше о методе window.setInterval() в нашей JavaScript справочнике.