Счетчик обратного отсчета при помощи setInterval

целебная сила

Счетчик обратного отсчета при помощи 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;
}

Счетчик обратного отсчета при помощи setInterval

После того, как написан HTML и CSS код, весь процесс можно разделить на три этапа.

  1. Найти в документе элемент, которым вы будете манипулировать
  2. Написать функцию, каждый раз изменяющую этот элемент
  3. Установить интервал запуска функции

Шаг 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);

Счетчик обратного отсчета при помощи setInterval

Добавим вторым аргументом 1000 миллисекунд и теперь наша функция будет запускаться один раз в секунду.


window.setInterval(countFuncDown, 1000);

Счетчик обратного отсчета при помощи setInterval

Но есть одна проблема, когда счетчик доходит до 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 на моем видеокурсе, ведь без этого языка невозможно заниматься вебразработкой.

Источник

средство от простатита

Просмотров:

Добавить комментарий