Счетчик обратного отсчета при помощи setInterval
Например, по какой-то причине вам нужно перенаправить посетителей с одного сайта на другой. Только сделать это без мгновенного редиректа в лоб, а установить обратный отсчет времени, показывая посетителям сколько секунд у них осталось. Что нужно сделать, чтобы цифра 5 стала уменьшаться на единицу и остановилась на нуле?
<h1>Внимание! Через <span id="countdown">5</span> секунд произойдет<br> автоматический переход на другой сайт.</h1>
h1 {
font-family: Tahoma, sans-serif;
color: palevioletred;
font-size: 20px;
font-weight: 500;
}
#countdown {
background-color: #9C27B0;
color: white;
font-size: 30px;
font-weight: bold;
padding: 0px 5px;
}
После того, как написан HTML и CSS код, весь процесс можно разделить на три этапа.
- Найти в документе элемент, которым вы будете манипулировать
- Написать функцию, каждый раз изменяющую этот элемент
- Установить интервал запуска функции
Шаг 1
Сначала выберем элемент по идентификатору #countdown.
let countdown = document.getElementById('countdown');
Шаг 2
Объявим функцию, отвечающую за обратный отсчет.
let countFuncDown = function() {
..
}
Метод textContent возвращает строку, поэтому надо внутри функции преобразовать строку в число. Для этого воспользуемся функцией parseFloat, из которой будем вычитать единицу. Текстовое значение 5, теперь будет числом и при каждом запуске функции уменьшаться на одну единицу.
let countFuncDown = function() {
countdown.textContent = parseFloat(countdown.textContent) - 1;
};
Шаг 3
Установим интервал запуска этой функции с помощью метода setInterval и определим сколько раз в секунду она будет запускаться. Данная функция принимает два аргумента: функцию обратного вызова и сколько миллисекунд нужно ждать до каждого ее вызова. Без второго аргумента числа начинают меняться с невероятной скоростью.
window.setInterval(countFuncDown);
Добавим вторым аргументом 1000 миллисекунд и теперь наша функция будет запускаться один раз в секунду.
window.setInterval(countFuncDown, 1000);
Но есть одна проблема, когда счетчик доходит до 0, то он не останавливается и уходит в минус. Пропишем условие, при котором наш счетчик остановится. Занесем текущее значение счетчика в переменную. Изменим данное выражение:
countdown.textContent = parseFloat(countdown.textContent) - 1;
на другое:
let currentTime = parseFloat(countdown.textContent);
countdown.textContent = currentTime - 1;
Зададим условие, которое изменит значение счетчика только тогда, когда он больше нуля. Переместим единицу внутрь оператора if.
if (currentTime > 0); {
countdown.textContent = currentTime - 1;
}
Осталось только сообщить браузеру, что как только значение счетчика дойдет до нуля, он должен прекратить запускать нашу функцию. Для этого добавим метод window.clearInterval после слова else и передадим данному методу аргумент. Нужно указать какой именно интервал следует остановить. Сохраним возвращаемое значение setInterval в переменную timer и передадим ее в качестве аргумента в метод clearInterval.
else {
window.clearInterval(timer);
}
let timer = window.setInterval(countFuncDown, 1000);
Когда значение счетчика дойдет до нуля, то он перестанет обновляться и браузер перестанет вызывать нашу функцию.
Посмотрите на CodePen, что у нас получилось в итоге.
Изучайте JavaScript на моем видеокурсе, ведь без этого языка невозможно заниматься вебразработкой.
-
Создано 16.04.2021 10:52:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.