Меню

Обратный счетчик времени javascript

Как создать анимированный таймер обратного отсчета с помощью HTML, CSS и JavaScript

В статье рассказывается, как создать таймер обратного отчета, используя только HTML, CSS и JavaScript. Вот что мы хотим получить:

Основные функции таймера:

  • Отображение оставшегося времени.
  • Преобразование времени в формат MM:SS.
  • Изменение цвета, когда оставшееся время приближается к нулю.
  • Отображение оставшегося времени в виде анимированного кольца.

Шаг 1. Начните с базовой разметки и стилей

Мы добавим svg с элементом circle внутри, чтобы нарисовать кольцо таймера. А также добавим интервал, чтобы показать оставшееся значение времени. Для этого мы вставляем JavaScript в HTML и включаем в DOM, указывая элемент #app.

Далее используем CSS, чтобы:

  • Установить размер таймера обратного отсчета.
  • Удалить заливку и обводку из элемента круга.
  • Установить ширину и цвет кольца.

В результате мы получили шаблон, который выглядит следующим образом.

Шаг 2. Настройка временной метки

HTML-код содержит пустой элемент для отображения оставшегося время. Мы добавим сюда соответствующее значение в формате MM:SS с помощью метода formatTimeLeft.

После этого мы используем только что созданный метод в шаблоне.

Чтобы вывести значение внутри кольца, нужно обновить стили.

Теперь заставим таймер отсчитывать от 20 до 0.

Шаг 3: Обратный отсчет

У нас есть значение timeLimit, которое представляет собой начальное время. А также значение timePassed, которое указывает, сколько времени прошло с момента начала отсчета.

Увеличим значение timePassed на секунду и пересчитаем timeLeft с помощью функции setInterval . Для этого реализуем метод startTimer, который будет:

  • Устанавливать интервал счетчика.
  • Увеличивать значение timePassed каждую секунду.
  • Пересчитывать значение timeLeft.
  • Обновлять значение метки в шаблоне.

Сохраним ссылку на этот объект интервала в переменной timerInterval, чтобы очистить его при необходимости.

У нас есть метод, который запускает таймер обратного отсчета. С его помощью запустим таймер.

Теперь таймер отсчитывает время. Реализуем изменение цвета временной метки при различных значениях.

Шаг 4: Перекрываем кольцо таймера другим кольцом

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

Сначала добавим элемент path в SVG.

После этого добавим несколько стилей, чтобы круговая траектория выглядела как оригинальное серое кольцо. Важно, чтобы свойство stroke-width принимало значение, равное размеру исходного кольца. А также чтобы длительность transition была ​​установлена ​​на 1 секунду.

Но кольцо таймера пока не анимируется.

Для анимации линии оставшегося времени мы будем использовать свойство stroke-dasharray.

Шаг 5. Анимация кольца прогресса

Посмотрим, как будет выглядеть кольцо с различными значениями stroke-dasharray.

Свойство stroke-dasharray делит оставшееся кольцо времени на отрезки равной длины. Это происходит, когда мы задаем stroke-dasharray число от 0 до 9.

Посмотрим, как это свойство будет себя вести, если передать ему два значения: 10 и 30.

stroke-dasharray: 10 30

Это устанавливает длину первой секции (оставшегося времени) на 10, а второй секции (прошедшего времени) – на 30. Мы можем использовать это в нашем таймере обратного отсчета.

Читайте также:  Счетчик просмотров для блога

Нужно, чтобы кольцо покрыло всю окружность. То есть, оставшееся время равно длине окружности кольца.

Вычислить длину дуги можно по следующей формуле:

Это значение используется при первоначальном наложении кольца.

stroke-dasharray: 283 283

Первое значение в массиве – это оставшееся время, а второе – прошедшее. Теперь нам нужно манипулировать первым значением. Вот что произойдет, когда изменяется первое значение.

Создадим метод для подсчета оставшейся доли начального времени. Еще один – для вычисления значения stroke-dasharray и обновление элемента

, представляющего оставшееся время.

Также необходимо обновлять контур каждую секунду. Для этого вызовем метод setCircleDasharray внутри timerInterval.

Но анимация отстает на 1 секунду. Когда мы достигаем 0, все еще виден кусочек кольца.

Эту проблему можно решить, постепенно уменьшая длину кольца во время обратного отсчета в методе calculateTimeFraction.

Шаг 6: Изменение цвета в определенные моменты времени

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

Теперь создадим метод, который будет отвечать за проверку превышения установленного порога и изменение цвета.

Мы удаляем один класс CSS, когда таймер обратного отсчета достигает определенной точки, и добавляем вместо него другой. Объявим эти классы.

Все готово. Ниже приводится полная демо-версия:

Источник



Таймер обратного отсчета в 18 строк кода javascript.

Бывает, что вам для чего-то нужен таймер обратного отсчета, в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на javascript в 18 строк кода.

  • Установите правильную дату окончания
  • Высчитайте оставшееся время
  • Приведите дату к удобному формату
  • Выведите данные таймера, как многоразовый объект
  • Отобразите часы на странице и остановите их, когда они достигнут нуля

Установите правильную дату окончания

Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:

var deadline = ‘2015-12-31’;

var deadline = ’31/12/2015′;

Или длинный формат

var deadline = ‘December 31 2015’;

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

var deadline = ‘December 31 2015 23:59:59 GMT+02:00’;

Высчитайте оставшееся время

Следующий шаг — высчитать оставшееся время. Чтобы это сделать, нам нужно написать функцию, которая будет брать строку с временем окончания и считать разницу между этим временем и текущим. Вот как это выглядит:

function getTimeRemaining(endtime) <
var t = Date.parse(endtime) — Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return <
‘total’: t,
‘days’: days,
‘hours’: hours,
‘minutes’: minutes,
‘seconds’: seconds
>;
>

Для начала мы создаем переменную t, чтобы хранить оставшееся время. Date.parse() метод встроен в javascript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.

Читайте также:  Когда нужно менять водяной счетчик

var t = Date.parse(endtime) — Date.parse(new Date());

Приведите дату к удобному формату

Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:

var seconds = Math.floor( (t/1000) % 60 );

Разберемся, что здесь происходит.

  • Делим миллисекунды на 1000, чтобы перевести их в секунды
  • Делим общее число секунд на 60 и сохраняем остаток — вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
  • Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции

Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.

Выведите данные таймера, как многоразовый объект

Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.

return <
‘total’: t,
‘days’: days,
‘hours’: hours,
‘minutes’: minutes,
‘seconds’: seconds
>;

Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:

Отобразите часы на странице и остановите их, когда они достигнут нуля

Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:

Затем напишите функцию, которая будет отображать данные внутри нашего div’а:

function initializeClock(id, endtime) <
var clock = document.getElementById(id);
var timeinterval = setInterval(function() <
var t = getTimeRemaining(endtime);
clock.innerHTML = ‘days: ‘ + t.days + ‘
‘ +
‘hours: ‘+ t.hours + ‘
‘ +
‘minutes: ‘ + t.minutes + ‘
‘ +
‘seconds: ‘ + t.seconds;
if(t.total

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM.

Дальше мы будем использовать setInterval, чтобы запускать анонимную функцию каждую секунду, которая будет делать следующее:

  • Высчитывать оставшееся время
  • Выводить оставшееся время в наш div
  • Если оставшееся время = 0, останавливать часы

Единственное, что осталось, запустить часы следующим образом:

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк javascript кода.

Подготовьте ваши часы для отображения

До стилизации нам будет нужно немного усовершенствовать некоторые вещи.

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

Убираем начальную задержку

В часах мы используем setInterval, чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.

Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval(ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock. Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval. Таким образом, часы будут показываться без задержки.

Читайте также:  Федеральный закон водяные счетчики

В вашем javascript замените это:

var timeinterval = setInterval(function()< . >,1000);

function updateClock() <
var t = getTimeRemaining(endtime);
clock.innerHTML = ‘days: ‘ + t.days + ‘
‘ +
‘hours: ‘+ t.hours + ‘
‘ +
‘minutes: ‘ + t.minutes + ‘
‘ +
‘seconds: ‘ + t.seconds;
if(t.total

Делаем скрипт более эффективным

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Теперь сделаем ссылку на эти элементы. Добавьте следующий код прямо после определения переменной clock.

var daysSpan = clock.querySelector(‘.days’);
var hoursSpan = clock.querySelector(‘.hours’);
var minutesSpan = clock.querySelector(‘.minutes’);
var secondsSpan = clock.querySelector(‘.seconds’);

Дальше нам нужно изменить функцию updateClock, чтобы обновить только числа, а не все часы. Новый код будет выглядеть так:

function updateClock() <
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;

Добавляем ведущие нули

Если вам нужны ведующие нули, вы можете заменить код такого вида:

secondsSpan.innerHTML = (‘0’ + t.seconds).slice(-2);

Заключение

Мы рассмотрели, как сделать простой таймер обратного отсчета на javascript. Все, что вам осталось, это добавить стили. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 2 ):

    18 строк кода Казалось бы, что может быть проще, ведь это блог для чайников. Выложи 2 файла в исходниках, прокомментируй каждую строку и будем вам вам счастье. Но нет, стиль изложения как самого первого урока. Попрыгунчики — сначала мы сделаем так, потом вот так, ну а для того, чтобы выглядело все прилично еще вот так. В итоге что мы имеем? Груду никак не с чем не связанных скриптов, из которых чайнику для того, что бы проверить работоспособность кода надо потратить немало времени. Может быть потому и комментариев 0? Имхо

    Сам скрипт заработал но в статье нет стилей. Также красиво как на картинке не получилось сделать. Искал другие решения и нашел классный сервис генерации gif таймеров обратного отсчета https://countdownmail.com , он типа для емайлов на на сайт тоже можно поставить.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Источник