Как создать таймер обратного отчёта на чистом 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. Когда таймер работает, он показывает дни, часы, минуты и секунды:
Когда обратный отсчет закончен, он отображает уведомление для пользователей:
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее
Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее
Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее
Как сделать кнопку назад на сайте? Самый простой вариант это с помощью JavaScript-функции history. С ней можно переходить вперед, назад, обновлять страницу и делать переход на две и более страницы сразу. Кнопка назад Как ссылка: <a onclick="javascript:history.back(); return false;">Назад</a> Как Читать далее
Добавить комментарий