Skip to main content

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

Как создать таймер обратного отчёта на чистом 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. Когда таймер работает, он показывает дни, часы, минуты и секунды:

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

Похожие записи
Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда... Читать далее

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия... Читать далее

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню... Читать далее

Графики, диаграммы и многое другое на сайте с помощью Google Charts

Google Charts предоставляет идеальный способ визуализации данных на вашем сайте. От простых линейных диаграмм до... Читать далее

Всплывающее окно при закрытии страницы

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

Календарь в input для ввода даты

Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем... Читать далее

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

*

code