Как сделать таймер обратного отсчета javascript

Встраиваем таймер обратного отсчёта на страницу

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

Задача

Есть гипотетическая статья, в которой рассказывается про разные упражнения на время. Нам нужно дать читателю таймер прямо на странице, чтобы он мог засечь время, не закрывая браузер.

Код должен быть на чистом JavaScript, без сторонних библиотек.

Готовим страницу

Чтобы проверить работу скрипта, создадим тестовую страницу — на ней будет только текст и наша кнопка запуска таймера. За основу возьмём страницу из проекта про параллакс и вырежем оттуда всё ненужное:

     
Что ещё учитывает навигатор
 
Чтобы алгоритм оставался простым и работал только со временем, все остальные параметры дорог тоже привязывают ко времени. Покажем, как это работает, на паре примеров.
 
Комфорт. Если нам нужно построить не самый быстрый, а самый комфортный маршрут, то мы можем отдать предпочтение автомагистралям и дорогам с несколькими полосами — на них обычно и асфальт получше, и резких поворотов поменьше. Чтобы навигатор выбирал именно такие дороги, им можно присвоить коэффициент 0,8 — это виртуально сократит время на дорогу по ним на 20%, а навигатор всегда выберет то, что быстрее.
 
С просёлочными и грунтовыми дорогами ситуация обратная. Они редко бывают комфортными, а значит, им можно дать коэффициент 1,3, чтобы они казались алгоритму более долгими и он старался их избегать. А лесным дорогам можно поставить коэффициент 5 — навигатор их выберет, только если это единственная дорога то точки назначения.
 
Сложность маршрута и реальное время. Маршрут из А в Б почти никогда не бывает прямым — на нём всегда есть повороты, развороты и съезды, которые отнимают время. Чтобы навигатор это учитывал, в графы добавляют время прохождения поворота — либо коэффициентом, либо отдельным параметром. Из-за этого алгоритм будет искать действительно быстрый маршрут с учётом геометрии дорог.
 
Пробки. Если есть интернет, то всё просто: навигатор получает данные о состоянии дорог и добавляет разные коэффициенты в зависимости от загруженности. Иногда навигатор ведёт дворами, когда трасса свободна — это не ошибка навигатора, а его прогноз на время поездки: если через 10 минут в этом месте обычно собираются пробки, то там лучше не ехать, а заранее поехать в объезд.
 
Если интернета нет, то алгоритм просто использует усреднённую модель пробок на этом участке. Эта модель скачивается заранее и постоянно обновляется в фоновом режиме.
  

Стили и внешний вид

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

Сделаем это в стилях внутри HTML-страницы вместо отдельного файла — нет смысла заводить файл со стилями из-за одной строчки кода:

 /* сделаем счётчик красным и выделим его жирным шрифтом */ #timer 

Добавляем на страницу кнопку и таймер

Чтобы запускать таймер, нужна кнопка. Для этого есть HTML-тег .

Чтобы кнопка что-то делала, на клик нужно повесить какое-то действие. Простой способ — повесить вызов функции, а содержание этой функции прописать где-то в другом месте.

Добавим этот фрагмент после третьего абзаца на нашей тестовой странице:

Запустить таймер

У нас появилась кнопка, но нет ни значения таймера, ни реакции на нажатие. А всё потому, что у нас ещё нет скрипта. Исправим это и создадим файл script.js.

Пишем скрипт

Код, который написан для проекта «Таймер для спорта» — хороший, но громоздкий: в нём много деталей, которые нам сейчас не нужны. Вместо него напишем простой скрипт, который будет работать так:

1. Устанавливаем переменную, в которой будет храниться время отсчёта.
2. На старте помечаем, что скрипт не запущен.
3. После нажатия на кнопку (вызова функции start()) запускаем ежесекундный отсчёт и помечаем, что скрипт запущен.
4. Внутри этого отсчёта получаем время запуска и высчитываем, когда нам нужно остановиться.
5. Переводим миллисекунды в минуты и секунды и выводим их на страницу в наш блок с таймером.
6. Так делаем до тех пор, пока оставшееся время не станет равно нулю.

Мы прокомментировали каждую строку, чтобы было проще разобраться, что происходит на каждом шаге скрипта:

// на сколько минут ставим таймер var count = 5; // запущен таймер или нет started = false; // запуск таймера по кнопке function start() < // если таймер уже запущен — выходим из функции if (started) ; // запоминаем время нажатия var start_time = new Date(); // получаем время окончания таймера var stop_time = start_time.setMinutes(start_time.getMinutes() + count); // запускаем ежесекундный отсчёт var countdown = setInterval(function() < // текущее время var now = new Date().getTime(); // сколько времени осталось до конца таймера var remain = stop_time - now; // переводим миллисекунды в минуты и секунды var min = Math.floor( (remain % (1000 * 60 * 60)) / (1000 * 60) ); var sec = Math.floor( (remain % (1000 * 60)) / 1000 ); // если значение текущей секунды меньше 10, добавляем вначале ведущий ноль sec = sec < 10 ? "0" + sec : sec; // отправляем значение таймера на страницу в нужный раздел document.getElementById("timer").innerHTML = min + ":" + sec; // если время вышло if (remain < 0) < // останавливаем отсчёт clearInterval(countdown); // пишем текст вместо цифр document.getElementById("timer").innerHTML = "Всё!"; >>, 1000); // помечаем, что таймер уже запущен started = true; >

Обновляем страницу и смотрим на результат — таймер появился под кнопкой, не мешает тексту и отсчитывает время до окончания своей работы:

Что дальше

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

Вы фронтендер? Гляньте сюда ↓

У нас есть курсы по прокачке навыков до уровня middle и далее. Начать можно бесплатно. Посмотрите, интересно ли вам это.

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Таймер обратного отсчёта на чистом JavaScript

В этой статье рассмотрим таймер обратного отсчета, построенный на чистом CSS и JavaScript. Он написан с использованием минимального количества кода без использования jQuery и каких-либо других сторонних библиотек.

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

Демо таймера обратного отсчёта

Простой таймер обратного отсчета с днями, часами, минутами и секундами. Очень легко настраивается. Создан на чистом CSS и Javascript (без зависимостей).

Подключение и настройка таймера

1. Вставить в нужное место страницы html-разметку таймера:

 
 
00
 
00
 
00
 
00
 
 

Таймер обратного отсчета отображает четыре числа: дни, часы, минуты и секунды. Каждое число находится в элементе . Первый класс ( timer__item ) используется для стилизации элемента, а второй — для таргетинга в JavaScript.

2. Добавить стили (базовое оформление):

.timer__items { display: flex; font-size: 48px; } .timer__item { position: relative; min-width: 60px; margin-left: 10px; margin-right: 10px; padding-bottom: 15px; text-align: center; } .timer__item::before { content: attr(data-title); display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 14px; } .timer__item:not(:last-child)::after { content: ':'; position: absolute; right: -15px; }

Стилизовать таймер обратного отсчета можно так как вы этого хотите.

Вышеприведённый CSS использует flexbox. Знак «:» и текст под каждым компонентом даты выводиться на страницу с помощью псевдоэлементов.

3. Добавить JavaScript:

JavaScript

document.addEventListener('DOMContentLoaded', function() { // конечная дата, например 1 июля 2021 const deadline = new Date(2021, 06, 01); // id таймера let timerId = null; // склонение числительных function declensionNum(num, words) { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; } // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов function countdownTimer() { const diff = deadline - new Date(); if (diff 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0; $days.textContent = days < 10 ? '0' + days : days; $hours.textContent = hours < 10 ? '0' + hours : hours; $minutes.textContent = minutes < 10 ? '0' + minutes : minutes; $seconds.textContent = seconds < 10 ? '0' + seconds : seconds; $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']); $hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']); $minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']); $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']); } // получаем элементы, содержащие компоненты даты const $days = document.querySelector('.timer__days'); const $hours = document.querySelector('.timer__hours'); const $minutes = document.querySelector('.timer__minutes'); const $seconds = document.querySelector('.timer__seconds'); // вызываем функцию countdownTimer countdownTimer(); // вызываем функцию countdownTimer каждую секунду timerId = setInterval(countdownTimer, 1000); });

4. Установить дату окончания. Например, до 1 июля 2021:

JavaScript

// конечная дата const deadline = new Date(2021, 06, 01);

Структура кода JavaScript

Основную часть кода занимает функция countdownTimer :

JavaScript

function countdownTimer() { // . }

Эта функция выполняет расчёт оставшегося времени и обновляет содержимое элементов .timer__item на странице.

Расчёт оставшегося времени осуществляется посредством вычитания текущей даты из конечной:

JavaScript

// new Date() - текущая дата и время const diff = deadline - new Date();

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

JavaScript

const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;

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

Вывод оставшегося времени на страницу:

JavaScript

$days.textContent = days < 10 ? '0' + days : days; $hours.textContent = hours < 10 ? '0' + hours : hours; $minutes.textContent = minutes < 10 ? '0' + minutes : minutes; $seconds.textContent = seconds < 10 ? '0' + seconds : seconds; $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']); $hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']); $minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']); $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']);

Переменные $days , $hours , $minutes , $seconds содержат элементы (таргеты), в которые выводятся компоненты времени.

Изменение содержимого элементов выполняется через textContent . Если значение меньше 10, то к нему добавляется символ «0».

Получение элементов (выполняется с помощью querySelector ):

JavaScript

// получаем элементы, содержащие компоненты даты const $days = document.querySelector('.timer__days'); const $hours = document.querySelector('.timer__hours'); const $minutes = document.querySelector('.timer__minutes'); const $seconds = document.querySelector('.timer__seconds');

Функция declensionNum используется для склонения числительных:

JavaScript

// склонение числительных function declensionNum(num, words) { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; }

Для постоянного вычисления оставшегося времени и вывода его на страницу используется setInterval .

Хранение идентификатора таймера осуществляется в переменной timerId :

JavaScript

// id таймера let timerId = null;

Использование setInterval для запуска функции countdownTimer каждую секунду:

JavaScript

// вызываем функцию countdownTimer каждую 1 секунду timerId = setInterval(countdownTimer, 1000);

Остановка таймера по истечении времени выполняется в функции countdownTimer :

JavaScript

function countdownTimer() { . if (diff 

// класс для создание таймера обратного отсчета class CountdownTimer { constructor(deadline, cbChange, cbComplete) { this._deadline = deadline; this._cbChange = cbChange; this._cbComplete = cbComplete; this._timerId = null; this._out = { days: '', hours: '', minutes: '', seconds: '', daysTitle: '', hoursTitle: '', minutesTitle: '', secondsTitle: '' }; this._start(); } static declensionNum(num, words) => { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; } _start() { this._calc(); this._timerId = setInterval(this._calc.bind(this), 1000); } _calc() { const diff = this._deadline - new Date(); const days = diff >0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0; this._out.days = days < 10 ? '0' + days : days; this._out.hours = hours < 10 ? '0' + hours : hours; this._out.minutes = minutes < 10 ? '0' + minutes : minutes; this._out.seconds = seconds < 10 ? '0' + seconds : seconds; this._out.daysTitle = CountdownTimer.declensionNum(days, ['день', 'дня', 'дней']); this._out.hoursTitle = CountdownTimer.declensionNum(hours, ['час', 'часа', 'часов']); this._out.minutesTitle = CountdownTimer.declensionNum(minutes, ['минута', 'минуты', 'минут']); this._out.secondsTitle = CountdownTimer.declensionNum(seconds, ['секунда', 'секунды', 'секунд']); this._cbChange ? this._cbChange(this._out) : null; if (diff 

// 1. Получим элементы в которые нужно вывести оставшееся количество дней, часов, минут и секунд const elDays1 = document.querySelector('.timer-1 .timer__days'); const elHours1 = document.querySelector('.timer-1 .timer__hours'); const elMinutes1 = document.querySelector('.timer-1 .timer__minutes'); const elSeconds1 = document.querySelector('.timer-1 .timer__seconds'); // 2. Установим время, например, на одну минуту от текущей даты const deadline1 = new Date(Date.now() + (60 * 1000 + 999)); // 3. Создадим новый объект, используя new CountdownTimer() new CountdownTimer(deadline1, (timer) => { elDays1.textContent = timer.days; elHours1.textContent = timer.hours; elMinutes1.textContent = timer.minutes; elSeconds1.textContent = timer.seconds; elDays1.dataset.title = timer.daysTitle; elHours1.dataset.title = timer.hoursTitle; elMinutes1.dataset.title = timer.minutesTitle; elSeconds1.dataset.title = timer.secondsTitle; }, () => { document.querySelector('.timer-1 .timer__result').textContent = 'Таймер завершился!'; });

 
 
00
 
00
 
00
 
00
 
 

function initializeClock(id, endtime) < var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() < var t = getTimeRemaining(endtime); if (t.total daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); > updateClock(); var timeinterval = setInterval(updateClock, 1000); >

function getTimeRemaining(endtime) < var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return < total: t, days: days, hours: hours, minutes: minutes, seconds: seconds >; > function initializeClock(id, endtime) < var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() < var t = getTimeRemaining(endtime); if (t.total daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); > updateClock(); var timeinterval = setInterval(updateClock, 1000); > var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline);

var deadline = new Date(Date.parse(new Date()) + 5 * 1000);