Как создать таймер обратного отчёта на чистом JavaScript

Как создать таймер обратного отчёта на чистом JavaScript

16 марта 2020 JavaScript

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

В этой статье шаг за шагом создадим таймер обратного отсчета, чтобы вы могли все понять. Вы можете найти весь код JavaScript в конце статьи.

1. HTML- код

Давайте начнем с HTML. Таймер обратного отсчета покажет четыре цифры: дни, часы, минуты и секунды. Создайте элемент <span> для каждого из них, чтобы позже можно было настроить таргетинг на них с помощью JavaScript.

Также добавьте тег <script> с путем к файлу JavaScript прямо перед закрывающим тегом </body>.

<div class="container">
    <p id="timer">
        <span id="timer-days"></span>
        <span id="timer-hours"></span>
        <span id="timer-mins"></span>
        <span id="timer-secs"></span>
    </p>
</div>
<script src="script.js"></script>

2. Установка даты окончания

Создайте новую глобальную переменную для даты и времени, когда обратный отсчет истечет (endDate в примере). Вы можете определить его значение, создав новый объект Date и вызвав его метод getTime().

Переменная endDate будет содержать дату истечения срока в формате UTC, который показывает миллисекунды с 1 января 1970 года, 00: 00: 00.000 по Гринвичу. Например, значение UTC 15 марта 2019 года, 12:00:00 составляет 1552647600000.

var endDate = new Date("Mar 15, 2019 12:00:00").getTime();

3. Определяем таймер

Создайте еще одну глобальную переменную для таймера. В приведенном ниже примере используется выражение функции, так как вам не нужно вызывать функцию отдельно. Однако, если вы хотите, вы также можете объявить его как оператор функции.

Глобальный метод JavaScript setInterval() многократно выполняет функцию. Его первый аргумент — это функция, которая должна быть выполнена, а второй аргумент — это задержка между выполнениями. Вам нужно объявить задержку в миллисекундах. Здесь будет 1000, поскольку мы будем обновлять таймер каждую секунду (1 секунда = 1000 миллисекунд).

var timer = setInterval(function() {

    /* Здесь идет остальная часть кода JavaScript. */

}, 1000);

4. Расчёт оставшегося времени

Внутри функции timer() определите две новые локальные переменные. Первый (now) вернет текущее время, а другой (t) вычислит оставшееся время.

В JavaScript пустой объект Date() возвращает текущую дату и время. Переменная now вызывает метод getTime() и сохраняет текущее время в формате UTC. Переменная t вычисляет оставшееся время, вычитая текущее время из даты окончания.

let now = new Date().getTime(); 
let t = endDate - now;

5. Конвертация UTC в дни, часы, минуты и секунды

Создайте блок if, который будет содержать инструкции, принадлежащие таймеру. Этот код будет выполняться каждую секунду, пока оставшееся время не станет больше нуля. Используя блок if, вам не нужно останавливать таймер по окончании обратного отсчета.

Во-первых, вам нужно преобразовать оставшееся время в пригодный для использования формат. В настоящее время он представлен в формате UTC, а вам нужно отображать его в виде дней, часов, минут и секунд. Итак, объявите четыре новые локальные переменные за оставшиеся дни, часы, минуты и секунды.

if (t >= 0) {

    let days = Math.floor(t / (1000 * 60 * 60 * 24));
    let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
    let secs = Math.floor((t % (1000 * 60)) / 1000);

}

Используя встроенную функцию JavaScript Math.floor(), вы можете округлить любое значение с плавающей запятой до ближайшего целого числа. Остальные расчеты следующие:

  • Оставшиеся дни: разделите значение UTC на 1000 * 60 * 60 * 24, которое представляет собой количество миллисекунд в одном дне (миллисекунды * секунды * минуты * часы).
  • Оставшиеся часы: получите остаток от предыдущего вычисления с помощью оператора% remainder и разделите его на количество миллисекунд в одном часе (1000 * 60 * 60 = миллисекунды * секунды * минуты).
  • Оставшиеся минуты: получите оставшиеся минуты и разделите их на количество миллисекунд в одной минуте (1000 * 60 = миллисекунды * секунды).
  • Оставшиеся секунды: получите оставшиеся секунды и разделите их на количество миллисекунд в одной секунде (1000).

6. Вывод таймера

Теперь, когда у вас есть все данные в правильном формате, вы можете вывести таймер на экран. Метод getElementById() объекта документа позволяет нацеливать элементы HTML, созданные на шаге 1, соответственно на #timer-days, #timer-hours, #timer-mins и #timer-secs. Вы можете поместить контент в целевые элементы HTML с помощью свойства innerHTML.

Добавьте следующий код в блок if (t> = 0) под вычислениями преобразования времени:

document.getElementById("timer-days").innerHTML = days + 
"<span class='label'>DAY(S)</span>";

document.getElementById("timer-hours").innerHTML= ("0" + hours).slice(-2) +
"<span class='label'>HR(S)</span>";

document.getElementById("timer-mins").innerHTML= ("0" + mins).slice(-2) +
"<span class='label'>MIN(S)</span>";

document.getElementById("timer-secs").innerHTML= ("0" + secs).slice(-2) +
"<span class='label'>SEC(S)</span>";

Приведенный выше код добавляет символ «0» к часам, минутам и секундам, когда их значения меньше 10. Хотя в этом нет необходимости, таймер выглядит лучше, когда количество цифр не меняется все время на экране.

Это может быть достигнуто с помощью метода форматирования, который использует метод slice(), который можно использовать для возврата части набора данных. Например, slice(1) вырезает первый символ строки и возвращает оставшуюся часть строки. Аналогично, slice(2) удаляет первые два символа и возвращает остальные. Отрицательное значение возвращает целевые символы, а не вырезает их. Итак, slice(-2) возвращает последние два символа строки.

В коде вам нужно добавить каждую цифру к «0» и вернуть два последних символа с помощью slice(-2). Таким образом, JavaScript будет добавлять начальный ноль к каждому однозначному числу, но оставит двузначные числа без изменений. Например:

  • (’05’).slice(-2) = ’05’;
  • (‘018′).slice(-2) = ’18’;

7. Уведомление пользователя, когда закончился отсчёт

Вы можете уведомить пользователей, когда обратный отсчет закончится, если хотите. Создайте блок else и укажите целевой элемент #timer с помощью метода getElementById(). Вы можете добавить любой текст в виде innerHTML, который вы хотите отобразить пользователям, когда закончится обратный отсчет.

else {

    document.getElementById("timer").innerHTML = "The countdown is over!";

}

Кроме того, вы можете убрать весь блок else, и в этом случае таймер просто исчезнет с экрана, когда закончится обратный отсчет.

8. Полный код

И это все! Вот полный код JavaScript, который вам нужно использовать для создания таймера обратного отсчета:

var endDate = new Date("Mar 15, 2019 12:00:00").getTime();

var timer = setInterval(function() {

    let now = newDate().getTime();
    let t = endDate - now;
    
    if (t >= 0) {
    
        let days = Math.floor(t / (1000 * 60 * 60 * 24));
        let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
        let secs = Math.floor((t % (1000 * 60)) / 1000);
    
        document.getElementById("timer-days").innerHTML = days +
        "<span class='label'>DAY(S)</span>";
    
        document.getElementById("timer-hours").innerHTML = ("0"+hours).slice(-2) +
        "<span class='label'>HR(S)</span>";
    
        document.getElementById("timer-mins").innerHTML = ("0"+mins).slice(-2) +
        "<span class='label'>MIN(S)</span>";
    
        document.getElementById("timer-secs").innerHTML = ("0"+secs).slice(-2) +
        "<span class='label'>SEC(S)</span>";
    
    } else {

        document.getElementById("timer").innerHTML = "The countdown is over!";
    
    }
    
}, 1000);

9. CSS-код

Вы можете стилизовать таймер обратного отсчета по своему усмотрению. Приведенный ниже CSS использует flexbox для позиционирования его по центру экрана как по горизонтали (с justify-content), так и по вертикали (с align-items).

body {
    margin: 0;
    padding: 0;
}
.container {
    background: #222;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#timer {
    color: #fff;
    font-size: 4rem;
}
.label {
    font-size: 2.5rem;
    padding-left: 0.25rem;
}

Конечный результат

Вот как выглядит таймер обратного отсчета с использованием вышеуказанного CSS. Когда таймер работает, он показывает дни, часы, минуты и секунды:

Когда обратный отсчет закончен, он отображает уведомление для пользователей:

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
3D фотоэффект изображения на JavaScript

В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее

Фильтрация и сортировка на JS с помощью библиотеки MixItUp

MixItUp - это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее

Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее

Яндекс карта с управлением для сайта

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, Читать далее

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Модальное окно Bootstrap: использование и настройка

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

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

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

*

code