<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

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

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

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

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

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

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

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

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

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

Комментарии (0):

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