Таймеры в JavaScript
В JavaScript есть функции-таймеры, которые позволяют отсрочить действие или выполнять его через определённый промежуток времени.
Метод setInterval
Для исполнения кода через равные промежутки времени, используется метод «setInterval(X, Y)«. В качестве первого параметра X необходимо указать функцию, которая будет исполняться каждые Y миллисекунд. Метод возвращает уникальный идентификатор созданного таймера. Попробуем написать программный код, который выводит в консоль строчку каждые 5 секунд:
function WriteLog() < console.log('Мыши любят сыр!'); >var TimerId = window.setInterval(WriteLog, 5000);Если загрузить страницу с таким JavaScript кодом, то в консоле будет писаться строчка ‘Мыши любят сыр!’ каждые 5 секунд. Чтобы прервать выполнение таймера, необходимо использовать метод «clearInterval(X)«. Который удаляет таймер с уникальным идентификатором X. Попробуем написать код секундомера с двумя кнопками (старт и стоп) и окном, в котором считаются секунды. На странице получим такой код:
Разберёмся по порядку в этом непростом примере. В первых трёх строчках выводится HTML код текстового окна, в котором записано количество секунд. Ниже стоят две кнопки «Старт» и «Стоп», у которых записаны одноимённые (в переводе на английский) функции в событии «onclick«. То есть если кликнуть на эти кнопки мышкой, то отсчёт секунд либо запустится, либо остановится.
После HTML кода начинается код JavaScript, в котором есть три функции. Посмотрим их по порядку. Первая функция — «Timer()«. Задача этой функции — увеличивать счётчик секунд на единицу. Для этого она читает содержимое элемента с атрибутом «id» равным «timer» и прибавляет к этому значению единицу. А потом записывает полученное значение обратно в текстовое поле. Обратите внимание, что для того чтобы функция считала значение поле числом, используется функция «parseInt()«, которая пытается интерпретировать свой аргумент как число. Если эту функцию не использовать то при прибавлении единицы она будет прибавляться к строке и с каждой секундой таймер просто будет показывать всё более длинную строку из единиц: «11111. «.
Две последние функции — это «start» и «stop«. Они запускают и останавливают таймер. Обратите внимание, что id таймера записывается в глобальную переменную «window.» для того, чтобы можно было обращаться к ней из разных функций. Иначе id таймера будет доступно только внутри функции «start» и не будет доступен в «stop«, поэтому остановить таймер будет невозможно.
Метод setTimeout
Иногда нужно задержать выполнение функции на определённое время. То есть сделать таймер, который отключится после первого срабатывания. Для этого существует метод «setTimeout(X, Y)«, который имеет те же самые параметры, что и «setInterval«. То есть X — это название функции, которая будет вызвана, а Y — это задержка после которой функция вызова. Попробуем модифицировать предыдущий пример, чтобы продемонстрировать работу метода. поставим задачу: надо увеличивать счётчик через 5 секунд после нажатия на кнопку «Прибавить единицу»:
Запишите такой пример, загрузите страницу с ним и нажмите на кнопку «Прибавить единицу». Через 5 секунд значение в текстовом поле изменится с 1 на 2 и больше меняться не будет, потому что «setTimeout» срабатывает только один раз.
Как создать таймер на сайт с помощью HTML, CSS и JavaScript
В статье рассказывается, как создать таймер на сайт, используя только HTML, CSS и JavaScript. Вот что мы хотим получить:
Основные функции таймера:
- Отображение оставшегося времени.
- Преобразование времени в формат MM:SS.
- Изменение цвета, когда оставшееся время приближается к нулю.
- Отображение оставшегося времени в виде анимированного кольца.
Обновлено: 2023-09-08 20:36:22 Вадим Дворников автор материала
Шаг 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
JavaScript позволяет создать таймер и выполнять какой-то код через определённое время. Для этого есть специальные функции. В них указывается время, через которое будет выполнен отпределённый код. Функции возвращают идентификатор таймера, через который можно в дальнейшем с ним работать.
Выполнение функции через интервал
Функция setInterval() многократно выполняет какой-то код через определённый интервал.
setInterval (функция, интервал, параметры)
функция — функция, которая должна запускаеться
интервал — интервал в миллисекундах, через который запускается функция
параметры — параметры, которые можно передать функции
Для примера создадим страницу, на которой будет выведено текущее время и будет обновляться каждые две секунды:
10
11
12
13
14
15
16
17
18
19
20
let cur = document.getElementById('cur'); function inform() < let current = new Date(); cur.innerHTML = current.getHours() + ' : ' + current.getMinutes() + ' : ' + current.getSeconds(); >setInterval(inform, 2000);
Обратите внимание, первый запуск функции происходит не сразу, а через интервал.
Существует возможность прекратить выполнение функции. Для этого нужно при создании конкретного таймера получить его идентификатор, а в нужный момент использовать функцию clearInterval() , которая прекращает работу этого таймера, и функция больше запускаться не будет.
let timer = setInterval(inform, 2000); clearInterval(timer);
Функция setInterval() запускает функцию чётко через указанный интервал. При этом время работы самой функции не учитывается. В нашем примере текущее время будет обновляться каждые две секунды, независимо от того, сколько времени требуется на обновление страницы. Если время исполнения функции получается больше, чем указанный интервал, то некоторые запуски не срабатывают. Но это не приводит к ошибке, следующий запуск будет выполнен.
Выполнение функции с задежкой
Функция setTimeout() позволяет выполнить какой-то код через определённое время.
setTimeout (функция, задержка, параметры)
функция — функция, которая должна запуститься
задержка — время в миллисекундах, через которое запустится функция
параметры — параметры, которые можно передать функции
Добавим на страницу скрипт, который будет выводить на страницу текст через 5 секунд после запуска:
25
26
27
28
29
30
31
32
let text = document.getElementById('text'); function usetext () < text.innerHTML = 'Этот текст появляется через 5 секунд'; >setTimeout(usetext, 5000);
Нужно понимать, что функция setTimeout() не останавлявает работу скрипта. Код, который идёт за ней, продолжает выполняться. А когда пройдёт указанное время, то выполняется функция. Если скрипт выполняется дольше, чем установленная задержка, то функция срабатывает только после выполнения скрипта.
Минимальный интервал, через который срабатывают обе рассмотренные функции, зависит от разных факторов. Самый минимальный, который можно установить — 4 миллисекунды. Меньше устанавливать нет смысла, потому что это самыая большая частота, которая предусмотрена в языке JavaScript. Но если ресурсов процессора не хватает для такой частоты исполнения функций, то интервал увеличивается. Кроме того, если ноутбук работает от батареи, то минимальный интервал значительно увеличивается. Это зависит от устройства и браузера.
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2024 © basecourse.ru Все права защищены
Как задать время отсчета таймера на javascript?
Подскажите пожалуйста, как задать время таймера с помощью кнопки? Таймер написан, время задаю в коде. Есть также три картинки. Необходимо изменять (задавать) время таймера в зависимости от выбора картинки. То есть, если пользователь выбирает первую картинку, то таймер одна минута, вторую — две минуты и т.д.
Сам таймер запускается через отдельную кноку старт. Код таймера:
let timer = 0.1; let amountTime = timer * 60; function calculateTime () < const countdown = document.querySelector("#countdown"); let minutes = Math.floor(amountTime/60); let seconds = amountTime%60; if (seconds < 10)< seconds = "0" + seconds; >if (minutes < 10)< minutes = "0" + minutes; >countdown.textContent = `$:$`; amountTime--; if (amountTime < 0) < stopTimer(); amountTime = 0; >function stopTimer() < clearInterval(); >> const btn = document.querySelector("#btn"); btn.addEventListener('click', startTimer); function startTimer ()
Мне нужно переменную timer задавать через выбор картинки (нажатие кнопки) пользователем. Код кнопок в HTML:
SOFT-BOILED MEDIUM-BOILED HARD-BOILED
Ставлю addEventListener на все три кнопки — не срабатывает.
Отслеживать
3,727 19 19 серебряных знаков 46 46 бронзовых знаков