Бывает, что вам для чего-то нужен таймер обратного отсчета, в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на JavaScript в 18 строк кода.
- Установить правильную дату окончания
- Высчитать оставшееся время
- Привести дату к удобному формату
- Вывести данные таймера, как многоразовый объект
- Отобразить часы на странице и остановить их, когда они достигнут нуля
Устанавливаем правильную дату окончания
Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:
var deadline = ‘2015-12-31′;
var deadline = ’31/12/2015’;
Или длинный формат
var deadline = ‘December 31 2015’;
Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:
var deadline = ‘December 31 2015 23:59:59 GMT+02:00’;
Высчитываем оставшееся время
Python. Таймер с обратным отсчетом
Следующий шаг — высчитать оставшееся время. Чтобы это сделать, нам нужно написать функцию, которая будет брать строку с временем окончания и считать разницу между этим временем и текущим. Вот как это выглядит:
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 >; >
Для начала мы создаем переменную t , чтобы хранить оставшееся время. Date.parse() метод встроен в JavaScript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.
var t = Date.parse(endtime) — Date.parse(new Date());
Приводим дату к удобному формату
Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:
var seconds = Math.floor( (t/1000) % 60 );
Разберемся, что здесь происходит.
- Делим миллисекунды на 1000, чтобы перевести их в секунды
- Делим общее число секунд на 60 и сохраняем остаток — вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
- Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции
Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.
Выводим данные таймера, как многоразовый объект
Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.
return ‘total’: t, ‘days’: days, ‘hours’: hours, ‘minutes’: minutes, ‘seconds’: seconds >;
Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:
ПИШЕМ СВОЙ ЛЕГКИЙ ТАЙМЕР НА PYTHON ЗА 5 МИНУТ
getTimeRemaining(deadline).minutes
Отображаем часы на странице и останавливаем их, когда они достигнут нуля
Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:
div id pl-s»>clockdiv»>div>
Затем напишите функцию, которая будет отображать данные внутри нашего div’а:
function initializeClock(id, endtime) var clock = document.getElementById(id); var timeinterval = setInterval(function() var t = getTimeRemaining(endtime); clock.innerHTML = ‘days: ‘ + t.days + ‘ ‘ + ‘hours: ‘+ t.hours + ‘ ‘ + ‘minutes: ‘ + t.minutes + ‘ ‘ + ‘seconds: ‘ + t.seconds; if(t.total0) clearInterval(timeinterval); > >,1000); >
Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM.
Дальше мы будем использовать setInterval , чтобы запускать анонимную функцию каждую секунду, которая будет делать следующее:
- Высчитывать оставшееся время
- Выводить оставшееся время в наш div
- Если оставшееся время = 0 , останавливать часы
Единственное, что осталось, запустить часы следующим образом:
initializeClock(‘clockdiv’, deadline);
Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк JavaScript кода.
Подготавливаем наши часы для отображения
До стилизации нам будет нужно немного усовершенствовать некоторые вещи.
- Убрать начальную задержку, чтобы таймер показывался незамедлительно
- Сделать скрипт часов более эффективным, чтобы не приходилось непрерывно перестраивать все часы
- Добавить нули по желанию
Убираем начальную задержку
В часах мы используем setInterval , чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.
Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval (ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock . Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval . Таким образом, часы будут показываться без задержки.
В вашем JavaScript замените это:
var timeinterval = setInterval(function() . >,1000);
function updateClock() var t = getTimeRemaining(endtime); clock.innerHTML = ‘days: ‘ + t.days + ‘ ‘ + ‘hours: ‘+ t.hours + ‘ ‘ + ‘minutes: ‘ + t.minutes + ‘ ‘ + ‘seconds: ‘ + t.seconds; if(t.total0) clearInterval(timeinterval); > > updateClock(); // запустите функцию один раз, чтобы избежать задержки var timeinterval = setInterval(updateClock,1000);
Делаем скрипт более эффективным
Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.
Вот html:
div id pl-s»>clockdiv»> Days: span class pl-s»>days»>span>br> Hours: span class pl-s»>hours»>span>br> Minutes: span class pl-s»>minutes»>span>br> Seconds: span class pl-s»>seconds»>span> div>
Теперь сделаем ссылку на эти элементы. Добавьте следующий код прямо после определения переменной clock .
var daysSpan = clock.querySelector(‘.days’); var hoursSpan = clock.querySelector(‘.hours’); var minutesSpan = clock.querySelector(‘.minutes’); var secondsSpan = clock.querySelector(‘.seconds’);
Дальше нам нужно изменить функцию updateClock , чтобы обновить только числа, а не все часы. Новый код будет выглядеть так:
function updateClock() var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = t.hours; minutesSpan.innerHTML = t.minutes; secondsSpan.innerHTML = t.seconds; . >
Добавляем ведущие нули
Если вам нужны ведующие нули, вы можете заменить код такого вида:
secondsSpan.innerHTML = t.seconds;
secondsSpan.innerHTML = (‘0’ + t.seconds).slice(-2);
Счётчик индивидуального отсчёта времени на чистом JavaScript
После того как время завершения отсчета стало известно — проводится расчет оставшегося времени до момента завершения отсчета. Но чтобы далее можно было более гибко настроить оформление счетчика — мы сводим время к секундам.
// Расчет оставшегося времени и сводим его к секундам var today = new Date(); var diff = BigDay — today; var countdown4 = Math.round(diff / 1000) // сводим разницу времени к секундам
Когда у нас есть оставшееся время в секундах, мы можем его подогнать к нужному нам виду. Дабы не засорять статью (так как она немного громоздкая по количеству строк), эта часть скрипта скрыта под спойлер:
Скрытая часть скрипта
// Конвертирование времени из секунд в дни : часы : минуты : секунды function convert_to_time(secs) < secs = parseInt(secs); hh = secs / 3600; hh = parseInt(hh); mmt = secs — (hh * 3600); mm = mmt / 60; mm = parseInt(mm); ss = mmt — (mm * 60); if (hh >23) < dd = hh / 24; dd = parseInt(dd); hh = hh — (dd * 24); >else < dd = 0; >if (ss < 10) < ss = «0» + ss; >if (mm < 10) < mm = «0» + mm; >if (hh < 10) < hh = «0» + hh; >if (dd == 0) < return (hh + «:» + mm + «:» + ss); >else < if (dd >1) < return (dd + » day » + hh + «:» + mm + «:» + ss); >else < return (dd + » day » + hh + «:» + mm + «:» + ss); >> >
Теперь делаем предпоследний рывок и переходим к графической части скрипта. Здесь происходит проверка того, что вывести на страничку — таймер с оставшимся временем или сообщение о том что таймер досчитал до 0:00:00.
// Определяем — выводить дальше таймер или надпись о завершении отсчета do_cd4 = function() < if (countdown4 < 0) < document.getElementById(‘cd4’).innerHTML = «Время закончилось!»; >else < document.getElementById(‘cd4’).innerHTML = convert_to_time(countdown4); setTimeout(‘do_cd4()’, 1000); >countdown4 = countdown4 — 1; >
И в завершение — мы присваиваем стили нашему счетчику и выводим его в место подключения javascript файла, внутри которого собственно и находится весь код счетчика.
document.write(» n»); // Вывод резальтата на страницу do_cd4(); // запуск графической части скрипта
Вот и всё, счетчик готов «к труду и обороне».
- javascript
- счетчик
- новичкам на заметку
Источник: habr.com
Как сделать обратный отчёт времени на JavaScript
В этой статье будет очень интересно, будет рассказываться как сделать JavaScript обратный отсчет времени до даты, при этом мы сделаем не только до дня, а ещё добавим отсчёт времени, плоть до минуты.
Ещё в конце будет можно скачать этот скрипт обратного отсчета времени на javascript для своего сайта, ещё можете посмотреть статью Как сделать таймер на JavaScript, в ней вы сделаете самый обычный таймер, без отсчёта до дней.
HTML:
Для начала, как всегда начнём с HTML, тут всё просто.
Как можете видеть это обычный HTML документ, единственное, мы создаём в нём div элемент, с классом timer , туда будем выводить значение нашего таймера.
JavaScript:
Вот теперь самое главное, это сама логика программы, а точнее теперь делаем скрипт на JavaScript, но сначала посмотрим логику программы.
Также, если вы ни разу не работали с временем на JavaScript, то посмотрите этот сайт.
Логика программы:
Суть того, как будет работать наша программа в том, что мы будем брать настоящие время и вычитать его из той даты, до которой нам нужно посмотреть отсчёт, к примеру, дата следующего первая сентября и т.д..
Всё это должно работать в интервале в одну секунду, и так каждый раз программа будет брать настоящие время и вычитать его из конечной даты, пока результат не будет равен или меньше нуля, после таймер останавливается.
Таким образом у нас должен получится таймер на сайт javascript.
Код программы:
Теперь займёмся кодом программы.
JavaScript
// Берём элемент для вывода таймера
let timer_show = document . getElementById ( «timer» ) ;
// Функция для вычисления разности времени
function diffSubtract ( date1 , date2 ) <
return date2 — date1 ;
// Массив данных о времени
let end_date = <
«full_year» : «1970» , // Год
«month» : «01» , // Номер месяца
«day» : «01» , // День
«hours» : «00» , // Час
«minutes» : «00» , // Минуты
«seconds» : «00» // Секунды
// Строка для вывода времени
let end_date_str = ` $ < end_date . full_year >- $ < end_date . month >- $ < end_date . day >T $ < end_date . hours >: $ < end_date . minutes >: $ < end_date . seconds >` ;
Это начало программы, давайте разберём его. Сначала мы создаём переменную которая хранит в себе элемент, в который будем отображать наш отсчёт.
Потом идёт функция в которой будем вычитать время, из заданного нами времени, вычитает настоящие время.
Дальше идёт JSON массив или ассоциативный массив, в котором мы как раз и храним данные до куда нам нужно отсчитывать наш таймер, как можете заметить у меня это девятое Мая, потом создаём строку формата YYYY-MM-DDTHH:mm:ss , но вместо букв подставляем значения из массива.
Сам таймер:
Теперь пришло время сделать сам таймер в интервале.
JavaScript
// Запуск интервала таймера
timer = setInterval ( function ( ) <
// Получение времени сейчас
let now = new Date ( ) ;
// Получение заданного времени
let date = new Date ( end_date_str ) ;
// Вычисление разницы времени
let ms_left = diffSubtract ( now , date ) ;
// Если разница времени меньше или равна нулю
if ( ms_left <= 0 ) < // То
// Выключаем интервал
clearInterval ( timer ) ;
// Выводим сообщение об окончание
alert ( «Время закончилось» ) ;
> else < // Иначе
// Получаем время зависимую от разницы
let res = new Date ( ms_left ) ;
// Делаем строку для вывода
let str_timer = ` $ < res . getUTCFullYear ( ) — 1970 >. $ < res . getUTCMonth ( ) >. $ < res . getUTCDate ( ) — 1 >$ < res . getUTCHours ( ) >: $ < res . getUTCMinutes ( ) >: $ < res . getUTCSeconds ( ) >` ;
// Выводим время
timer_show . innerHTML = str_timer ;
Теперь разберём код, в начале мы берём настоящие время, потом получаем время до которого нужно сделать отсчёт, дальше вычитаем в нашей функции из назначенного времени, настоящие время, функция возвращает миллисекунды разности этого вычитания.
Проверяем, если миллисекунд меньше или равно нулю, то выключаем интервал и выводим сообщение, что время закончилось.
Если условие не срабатывает, то из разности получаем время, дальше идёт самое интересное, мы создаём строку для вывода таймера, разберём его по подробнее.
- res.getUTCFullYear() — Получаем год, но в нашем коде вычитаем 1970, это нужно для того, чтобы отсчёт начинался с нулевого года, так как, по умолчанию год начинается 1970 года.
- res.getUTCMonth() — Просто получаем номер месяца.
- res.getUTCDate() — Получаем день, но из него вычитаем один, это нужно для того, чтобы не учитывался сегодняшней день, если этого не сделать, то дата всегда будет на один день больше, даже тогда, когда остались считанные минуты.
- res.getUTCHours() — Получаем час.
- res.getUTCMinutes() — Получаем минуты.
- res.getUTCSeconds() — Получаем секунды.
Можете заметить что выводим время по UTC. Дальше выводим эту строку таймер.
Тест программы:
Программу мы делать закончили, теперь покажу как она работает. У меня сейчас 23:19, я ставлю время на 23:20.
Источник: prognote.ru