Как создать таймер на сайт с помощью 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
Все готово. Ниже приводится полная демо-версия:
Скрипт таймера обратного отсчета времени для сайта на html и javascript
● без абонентской платы.
● без рекламы и сторонних ссылок.
● независим от сторонних сайтов.
● не подгружает дополнительные скрипты.
● с перенаправлением пользователей,
● закрытием доступа на сайт,
● всплывающим сообщением,
● помнит всех посетителей,
● два режима работы «До определенной даты» и «Циклический»,
● выполняет свой javascript код,
● красивый, может иметь любой цвет шрифта.
● легко устанавливается и настраивается,
● простое и удобное создание с помощью «Генератора таймера обратного отсчета»
Дополнительные стили
Заказать таймер, можно в разделе Контакты
Настройки таймера
Возможности таймера обратного отсчета для сайта
● Два режима работы:
Режим «циклический» — время задается на определенный отрезок, без привязки к какой либо дате. Таймер начинает отсчет для каждого посетителя, начиная с момента его первого посещения сайта. Например, время можно задать сроком на 2 дня 10 часов 10 минут.
Режим «до определенной даты» — позволяет задать время до определенной даты, например до 1 декабря 2015 года.
● Таймер не требует PHP, MySQL и jQuery.
Нет необходимости подключать базы данных и устанавливать дополнительные скрипты jQuery. При этом, таймер запоминает каждого посетителя в отдельности. Работает на любом, даже бесплатном хостинге с поддержкой Javascript.
● Таймер помнит каждого посетителя сайта и отсчитывает индивидуальное время для каждого, начиная с момента его первого посещения страницы. Время у каждого посетителя не сбрасывается, а запоминается, даже если пользователь закроет и снова откроет страницу или браузер. Т.е. если пользователь открыл страницу и таймер показывал 9 часов до окончании акции, то, придя через 1 час, таймер будет показывать 8 часов оставшегося времени. Таким образом, пользователь понимает, что это реальная акция и его время непрерывно убывает.
● Возможность перенаправления и закрытия доступа на страницу сайта. Пользователь, у которого вышло время, по вашему желанию будет перенаправляться на указанную вами страницу и не сможет попасть на страницу акции в течение заданного вами времени.
● Простая установка таймера на HTML страницу. Достаточно скопировать и вставить код в нужное место на вашем сайте. Код добавляется одним блоком или подключается отдельным файлом.
● Бесконфликтность CSS и Javascript.
Все имена CSS классов, javascript функций, переменных, атрибутов id в html являются уникальными, что значительно уменьшает вероятность конфликта с другими скриптами и CSS стилями.
● Таймер корректно работает во всех популярных браузерах.
Работоспособность проверена в браузерах Opera, Mozilla Firefox, Google-Хром, Яндекс-Браузер, Safari.
● Таймер не подгружает дополнительные скрипты.
Его работа не зависит от доступности или недоступности сторонних сайтов, в том числе и нашего.
● Неограниченное количество таймеров на сайте.
В зависимости от типа, можно использовать отдельный независимый таймер со своими настройками, на каждой странице сайта.
● Простое и быстрое создание таймеров.
Для настройки параметров, вам не придется тратить время и разбираться в его коде. Достаточно открыть в любом браузере простой и удобный «Генератор таймера обратного отсчета», задать нужные параметры и нажатием одной кнопки, получить полностью готовый код, который достаточно скопировать и вставить на нужную страницу сайта.
● Авто-перезапуск времени таймера.
При задании новых сроков времени, таймер, автоматически завершит предыдущую акцию у всех пользователей и начнет отсчет новой, согласно новых сроков.
● Правильное время таймеров.
На время таймера не оказывают влияние настройки времени установленные на компьютере клиента (при режиме «Циклический»). Все пользователи будут видеть правильное время, согласно срока акции, установленных вами.
Время таймера не уходит в минус, все работает как положено.
Таймер обратного отсчета для сайта позволяет задать:
● время таймера в днях, часах, минутах и секундах или до определенной даты.
● Перенаправление посетителей (редирект пользователей). Перенаправлять или нет пользователя на другую страницу по истечении времени, либо просто перезапустить таймер заново.
● адрес страницы перенаправления.
● Закрытие доступа на страницу. Продолжительность перенаправления, т.е. сколько времени пользователь не сможет попасть обратно на страницу с таймером, даже если попытается закрыть и открыть эту страницу или браузер заново.
● включать и отключать мерцание секунд.
● включать и отключать отображение миллисекунд и дней, оставив только часы, минуты и секунды.
● Возможность задавать любой цвет шрифта.
● Свой javascript код, который выполнится при окончании времени таймера.
● Всплывающее сообщение посетителям сайта, появляющееся при окончании времени таймера.
Что вы получаете
● Вам будет передан полностью функциональный «Генератор таймера обратного отсчета» в виде отдельного файла. Этот генератор не зависит от сторонних сайтов, в том числе и от нашего сайта. С его помощью вы сможете создавать неограниченное количество таймеров, с заданными параметрами.
● Созданные, через генератор, таймеры, будут принадлежать только вам и вашему сайту, указанному при заказе.
Заказать таймер обратного отсчета для сайта 500 руб. —> 00 дни 00 часы 00 мин. 00
—> mobile-island@yandex.ru или ВКонтакте —>
Заказать таймер, можно в разделе Контакты
или, через автоматическую платежную систему
Создание таймера обратного отсчета для сайта
● Запустите в браузере, переданный вам, «Генератор таймера обратного отсчета».
● На открывшейся странице, задайте нужные параметры и нажмите кнопку «Создать таймер обратного отсчета».
● Затем, просто скопируйте и вставьте созданный таймер прямо на html страницу вашего сайта.
● Все, таймер готов к работе.
Требование для работы таймера обратного отсчета
● Лицензия на 1 домен. Проверку работы таймера выполняйте после установки на сайт, указанный при заказе.
● Один из современных браузеров с javascript.
● На отдельной странице сайта, может быть один таймер. На всем сайте, количество таймеров, не ограничено, т.е. 100 страниц — 100 уникальных таймеров.
● Таймер не является модулем или расширением CMS Joomla или WordPress, но при соответствующих настройках, разрешающих использование Javascript в этих CMS, может быть добавлен на страницу, как самостоятельный скрипт, через визуальный HTML редактор этих CMS систем.
История версий таймера обратного отсчета для сайта
Версия 3.2
● Добавлен визуальный редактор таймера.
● Простая установка таймера одной, короткой строкой.
Версия 3.1
● Реализована поддержка одновременно двух доменных имен сайта, например sitename.ru и www.sitename.ru.
● Корректное отображение в AdobeMuse.
Версия 3.0
● Реализована поддержка всеми популярными браузерами.
● Появилась возможность использования независимого отдельного таймера на каждой странице сайта.
● Появилось два режима работы «До определенной даты» и «Циклический».
● Создан простой и удобный «Генератор таймера обратного отсчета».
● Добавлена возможность задания любого цвета.
● Добавлена возможность отключать отдельные блоки «Дни» и «Миллисекунды».
● Добавлена возможность использовать режим невидимости на странице.
● Весь код таймера сокращен до одного HTML блока, что позволило быстро и удобно добавлять его в нужное место на сайте.
● Изменен дизайн.
Версия 2.0
● Добавлена возможность исполнить свой JavaScript код.
● Добавлено информационное всплывающее сообщение в окне.
● Добавлена возможность перенаправления посетителей.
● Изменен дизайн.
nptit / timer.md
Бывает, что вам для чего-то нужен таймер обратного отсчета, в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на 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 >;
Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:
getTimeRemaining(deadline).minutes
Отображаем часы на странице и останавливаем их, когда они достигнут нуля
Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:
div id pl-s">clockdiv">div>
Затем напишите функцию, которая будет отображать данные внутри нашего 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.total0) clearInterval(timeinterval); > >,1000); >
Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM.
Дальше мы будем использовать setInterval , чтобы запускать анонимную функцию каждую секунду, которая будет делать следующее:
- Высчитывать оставшееся время
- Выводить оставшееся время в наш div
- Если оставшееся время = 0 , останавливать часы
Единственное, что осталось, запустить часы следующим образом:
initializeClock('clockdiv', deadline);
Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 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.total0) clearInterval(timeinterval); > > updateClock(); // запустите функцию один раз, чтобы избежать задержки var timeinterval = setInterval(updateClock,1000);
Делаем скрипт более эффективным
Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.
Вот html:
div id pl-s">clockdiv"> Days: span class pl-s">days">span>br> Hours: span class pl-s">hours">span>br> Minutes: span class pl-s">minutes">span>br> Seconds: span class pl-s">seconds">span> div>
Теперь сделаем ссылку на эти элементы. Добавьте следующий код прямо после определения переменной 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 = t.seconds;
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
Мы рассмотрели, как сделать простой таймер обратного отсчета на JavaScript. Все, что вам осталось, это добавить стили.
Встраиваем таймер обратного отсчёта на страницу
Сейчас будет простой веб-проект, на котором мы потренируемся в JavaScript. Большой практической пользы от проекта как такового нет, но это полезное упражнение для начинающих веб-разработчиков.
Задача
Есть гипотетическая статья, в которой рассказывается про разные упражнения на время. Нам нужно дать читателю таймер прямо на странице, чтобы он мог засечь время, не закрывая браузер.
Код должен быть на чистом JavaScript, без сторонних библиотек.
Готовим страницу
Чтобы проверить работу скрипта, создадим тестовую страницу — на ней будет только текст и наша кнопка запуска таймера. За основу возьмём страницу из проекта про параллакс и вырежем оттуда всё ненужное:
Параллакс Что ещё учитывает навигатор
Чтобы алгоритм оставался простым и работал только со временем, все остальные параметры дорог тоже привязывают ко времени. Покажем, как это работает, на паре примеров.
Комфорт. Если нам нужно построить не самый быстрый, а самый комфортный маршрут, то мы можем отдать предпочтение автомагистралям и дорогам с несколькими полосами — на них обычно и асфальт получше, и резких поворотов поменьше. Чтобы навигатор выбирал именно такие дороги, им можно присвоить коэффициент 0,8 — это виртуально сократит время на дорогу по ним на 20%, а навигатор всегда выберет то, что быстрее.
С просёлочными и грунтовыми дорогами ситуация обратная. Они редко бывают комфортными, а значит, им можно дать коэффициент 1,3, чтобы они казались алгоритму более долгими и он старался их избегать. А лесным дорогам можно поставить коэффициент 5 — навигатор их выберет, только если это единственная дорога то точки назначения.
Сложность маршрута и реальное время. Маршрут из А в Б почти никогда не бывает прямым — на нём всегда есть повороты, развороты и съезды, которые отнимают время. Чтобы навигатор это учитывал, в графы добавляют время прохождения поворота — либо коэффициентом, либо отдельным параметром. Из-за этого алгоритм будет искать действительно быстрый маршрут с учётом геометрии дорог.
Пробки. Если есть интернет, то всё просто: навигатор получает данные о состоянии дорог и добавляет разные коэффициенты в зависимости от загруженности. Иногда навигатор ведёт дворами, когда трасса свободна — это не ошибка навигатора, а его прогноз на время поездки: если через 10 минут в этом месте обычно собираются пробки, то там лучше не ехать, а заранее поехать в объезд.
Если интернета нет, то алгоритм просто использует усреднённую модель пробок на этом участке. Эта модель скачивается заранее и постоянно обновляется в фоновом режиме.
Стили и внешний вид
Так как это будет встраиваемый код, то мы не будем как-то по-особенному оформлять кнопку запуска. Единственное, что мы настроим, — добавим красный цвет самому таймеру отсчёта, чтобы его можно было легко заметить на странице при вёрстке.
Сделаем это в стилях внутри HTML-страницы вместо отдельного файла — нет смысла заводить файл со стилями из-за одной строчки кода:
/* сделаем счётчик красным и выделим его жирным шрифтом */ #timer Добавляем на страницу кнопку и таймер
Чтобы запускать таймер, нужна кнопка. Для этого есть HTML-тег .
Чтобы кнопка что-то делала, на клик нужно повесить какое-то действие. Простой способ — повесить вызов функции, а содержание этой функции прописать где-то в другом месте.
Добавим этот фрагмент после третьего абзаца на нашей тестовой странице:
У нас появилась кнопка, но нет ни значения таймера, ни реакции на нажатие. А всё потому, что у нас ещё нет скрипта. Исправим это и создадим файл script.js.
Пишем скрипт
Код, который написан для проекта «Таймер для спорта» — хороший, но громоздкий: в нём много деталей, которые нам сейчас не нужны. Вместо него напишем простой скрипт, который будет работать так:
- Устанавливаем переменную, в которой будет храниться время отсчёта.
- На старте помечаем, что скрипт не запущен.
- После нажатия на кнопку (вызова функции start()) запускаем ежесекундный отсчёт и помечаем, что скрипт запущен.
- Внутри этого отсчёта получаем время запуска и высчитываем, когда нам нужно остановиться.
- Переводим миллисекунды в минуты и секунды и выводим их на страницу в наш блок с таймером.
- Так делаем до тех пор, пока оставшееся время не станет равно нулю.
Мы прокомментировали каждую строку, чтобы было проще разобраться, что происходит на каждом шаге скрипта:
// на сколько минут ставим таймер var count = 5; // запущен таймер или нет started = false; // запуск таймера по кнопке function start() < // если таймер уже запущен — выходим из функции if (started) ; // запоминаем время нажатия var start_time = new Date(); // получаем время окончания таймера var stop_time = start_time.setMinutes(start_time.getMinutes() + count); // запускаем ежесекундный отсчёт var countdown = setInterval(function() < // текущее время var now = new Date().getTime(); // сколько времени осталось до конца таймера var remain = stop_time - now; // переводим миллисекунды в минуты и секунды var min = Math.floor( (remain % (1000 * 60 * 60)) / (1000 * 60) ); var sec = Math.floor( (remain % (1000 * 60)) / 1000 ); // если значение текущей секунды меньше 10, добавляем вначале ведущий ноль sec = sec < 10 ? "0" + sec : sec; // отправляем значение таймера на страницу в нужный раздел document.getElementById("timer").innerHTML = min + ":" + sec; // если время вышло if (remain < 0) < // останавливаем отсчёт clearInterval(countdown); // пишем текст вместо цифр document.getElementById("timer").innerHTML = "Всё!"; >>, 1000); // помечаем, что таймер уже запущен started = true; >Обновляем страницу и смотрим на результат — таймер появился под кнопкой, не мешает тексту и отсчитывает время до окончания своей работы:
Что дальше
У нас получился рабочий, но неуниверсальный код: если на странице будет нужен не один, а пять таймеров, то нам придётся копировать и создавать пять разных функций, которые почти одинаковые внутри. Вместо этого можно сделать универсальную функцию, а параметры работы передавать при вызове по нажатию кнопки. Если хотите попробовать свои силы в программировании, попробуйте сделать это сами и поделитесь результатами в комментариях.
Вы фронтендер? Гляньте сюда ↓
У нас есть курсы по прокачке навыков до уровня middle и далее. Начать можно бесплатно. Посмотрите, интересно ли вам это.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.