Jquery обратный отсчет времени

Бывает, что вам для чего-то нужен таймер обратного отсчета, в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на 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’;

Высчитайте оставшееся время

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

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
>;

Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:

Отобразите часы на странице и остановите их, когда они достигнут нуля

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

Затем напишите функцию, которая будет отображать данные внутри нашего 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.total

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM.

Дальше мы будем использовать setInterval, чтобы запускать анонимную функцию каждую секунду, которая будет делать следующее:

• Высчитывать оставшееся время
• Выводить оставшееся время в наш div
• Если оставшееся время = 0, останавливать часы

Единственное, что осталось, запустить часы следующим образом:

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 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.total

Делаем скрипт более эффективным

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Теперь сделаем ссылку на эти элементы. Добавьте следующий код прямо после определения переменной 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 = (‘0’ + t.seconds).slice(-2);

Заключение

Мы рассмотрели, как сделать простой таймер обратного отсчета на javascript. Все, что вам осталось, это добавить стили. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 2 ):

18 строк кода Казалось бы, что может быть проще, ведь это блог для чайников. Выложи 2 файла в исходниках, прокомментируй каждую строку и будем вам вам счастье. Но нет, стиль изложения как самого первого урока. Попрыгунчики — сначала мы сделаем так, потом вот так, ну а для того, чтобы выглядело все прилично еще вот так. В итоге что мы имеем? Груду никак не с чем не связанных скриптов, из которых чайнику для того, что бы проверить работоспособность кода надо потратить немало времени. Может быть потому и комментариев 0? Имхо

Сам скрипт заработал но в статье нет стилей. Также красиво как на картинке не получилось сделать. Искал другие решения и нашел классный сервис генерации gif таймеров обратного отсчета https://countdownmail.com , он типа для емайлов на на сайт тоже можно поставить.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.

Самый простой и удобный таймер обратного отсчета

Javascript

Указываем дату окончания работы таймера

Формат вывода даты ISO 8601:

Вывод даты с точным временем и часовым поясом:

Вывод таймера для лендингов – таймер все время будет выводить, что осталось 15 дней (можно указать любое время)

Рабочий пример Таймера обратного отсчета

Скрываем таймер после окончания времени и выводим сообщение, что время истекло

Данное решение предложил в комментариях Игорь.

Добавляем в HTML блок с сообщением

Добавляем такие стили в CSS:

В скрипте меняем функцию инициализации таймера function initializeClock(id, endtime) <. >, остальное оставляем так же, как было:

В данной функции изменилось то, что при истечении времени таймера, на сам таймер добавляется класс .hidden (скрывает таймер), а на сообщение об окончании времени вешается класс .visible (отображает сообщение), а так же прекращаем выполнение функции вызовом метода clearInterval(timeinterval); . А вывод единиц времени помещен после проверки истекло время или нет.

Рабочий пример Таймера обратного отсчета с выводом сообщения об истечении времени

Нажмите кнопку Rerun, чтобы убедиться, что все работает как надо.

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

Суть таймера в том, что при окончании времени таймер не останавливается, не выводится никакое сообщение, а просто начинается новый отсчет:

Таймер установлен на 5 секунд и при окончании времени будет перезапущен еще на 5 секунд

Разница в JS-коде между вариантом с выводом сообщения об окончании времени только в замене этого кода

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

Рабочий пример таймера обратного отсчета времени с рестартом

Комментарии (74) к “Простой таймер обратного отсчета на Javascript”

Артём

Я закопипастил код. В моем случае надо отсчитывать от 35 до 0 секунд. Таймер считает от 35 до 19 сек, а потом начинает считать в обратном порядке, от 19 до 60

Denis Creative

Никита

А как задать текущее время? Чтоб отсчет таймера шел от реально времени

Denis Creative

Это таймер обратного отсчета. Что вы имеете в виду под “Чтоб отсчет таймера шел от реально времени”?

Никита

Чтобы отсчет шел от времени которое на данный момент и до конечной даты

Denis Creative

По такому примеру таймер будет отсчитывать время до 20 мая

Александр

Подскажите как скрыть таймер когда время вышло?

Игорь

Denis Creative

Спасибо. Добавил код в статью.

Игорь

Это вам спасибо уже 3 заказ на фрилансе на основе этого кода )))

Николай

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

Denis Creative

Таймер должен быть задан в таком случае на конкретную дату:
var deadline="January 01 2019 00:00:00 GMT+0300";
а не на текущее время + время таймера:
var deadline = new Date(Date.parse(new Date()) + 35 * 1000);

Денис

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

Denis Creative

Приведите пример, что нужно. Потому как в статье описаны 2 варианта, которые требуются в 99% использования таймеров.

Денис

Зациклить таймер можно ?

Денис

Так я же написал, что бы по окончанию счета он начал заново считать, а в примерах он заканчивает считать и показывается блок time the up

Denis Creative

В примере с выводом сообщения об окончании времени нужно изменить код

заменить на этот:

Рабочий пример добавил в статью

Денис

Здравствуйте, а если такая задача: считать до определённого времени от текущая дата + N дней?

Denis Creative

От текущей даты до + N дней такой код используется:

15 – дни
24 – часы
60 – минуты

Александр

Denis Creative, здравствуйте!
Спасибо Вам за эту статью, она почти мне помогла.
Хотелось бы узнать, если ли возможность чтобы счетчик сбрасывался на сайте каждые два дня Допустим я его выгружаю в 0:00 и он стартует на два дня и потом снова сбрасывается на два дня.
Как я понял ваш вариант он запускается автоматически при загрузке старицы и другой каждый раз надо менять дату в коде.

Denis Creative

Нужно взять код таймера обратного отсчета времени с рестартом и поменять
1. Конечную дату

2. Обновление конечной даты после истечения срока действия таймера

Получится примерно такой код, не знаю, на сколько правильный, но вроде работает:
https://codepen.io/deniscreative/pen/BGEqdM

Виталий

Денис. А можете еще подсказать как сделать чтобы таймет продолжал считать в обратном направлении и при этом класс добавлялся к цифрам?
То-есть задача сделать что-то з 10 минут, таймер для тернировки. Если в 10 минут не укоадываются то красным идет обратный отсчет на сколько превысили время?

Denis Creative

Мне кажется, этот таймер не совсем подходит под Вашу задачу.

Здравствуйте, подскажите пожалуйста как сделать чтобы отсчёт шел допустим 2012 года 1 января допустим и до бесконечности? посмотрел в data-countdown на гите , там у них есть пример, но как реализовать так и не понял..
Спасибо.

Denis Creative

Не понял вопрос, как это до бесконечности?
Таймер обратного отсчета предполагает, что есть конечная дата, и ведет отсчет до нее.
Подсчет времени от какой-то даты до текущего момента, это простой таймер. Вам нужен просто таймер? Для этого нужен другой код.

Подскажите, а как в скрипте указать отображение русского языка. У меня ����������� отображается когда меняю на русский текст

Denis Creative

Стоит в шапке, все как надо. Причем вокруг текст на странице русский, нормально отображается, а вот именно текст скрипта ������������ ��������

Denis Creative

Чет не пойму, какой текст скрипта? Если скрипт только цифры выводит…

Dvtcnj Countdown Clock русская фраза, и вместо Hours и пр. Руский шрифт коверкается.

Denis Creative

Эти фразы не в скрипте, а в HTML используются.
Проверьте кодировку файла, чтобы там было UTF-8 без BOM.

санек

как сделать чтобы он не запускался сам?

Denis Creative

а как он должен запускаться?

санек

Denis Creative

это вам нужен обычный таймер, наверное

Владимир

Добрый день. А как сделать чтобы счетчик времени начинался с 02 часов 35 мин 25 сек?

Владимир

точнее таймер с обратным отчетов начинался 02:35:24

Denis Creative

2*60*60 + 35*60 + 24 = 9324 секунды

Нурбек

у меня ничего не выводит –

Может устарела библиотека?

Denis Creative

Тут нечему устаревать – проверьте свой HTML

Анастасия

А как сделать что бы таймер который по окончанию времени начинает отсчет заново (последний вариант) не скидывал время при обновлении страницы?
Т.е. мне надо чтоб он отсчитывал допусти 24 часа с 00:00:00 и в полночь отсчет опять обнулялся бы. А то сейчас получается что если ставить 12 часов отсчета при обновлении страницы опять 12 часов, а не 11:58

Denis Creative

Анастасия

Спасибо. Сначала почему то не получилось, но теперь все работает!

Denis Creative

Только там пример для 2-ух дней, вам нужно изменить 2 на 1, чтобы было для одного дня.

Максим

Здравствуйте! Стоит такая задача. Таймер обратного отсчета, но что бы он отсчитывал до 15 числа каждого месяца до 19.00. Потом перезапускался и снова отсчитывал до 15 числа 19.00 следующего месяца. И так постоянно. Просто если поставить 30 дней а в месяце будет 31 то получиться что таймер не правильно будет считать

Denis Creative

Напишите функцию, которая будет по текущему месяцу высчитывать правильное количество дней и время до окончания.

Андрей

Здравствуйте! А как сделать так, что бы текущему времени добавить еще несколько секунд? Когда добавляю по кнопке запуск функции initializeClock(‘clockdiv’, deadline); – то считает уже два времени одновременно. Как остановить(убрать) первый отсчет времени? или обновить его

Denis Creative

Создайте пример на Codepen – будет понятнее, что вы имеете в виду.

Михайл

Спасибо! То что нужно ) Искал, но попадалось всякое. Мне нужна была фишка с указыванием GMT+0300 а то для разных стран показывалось разные значения )

Денис, здравствуйте. Смотрите, у меня два счётчика на сайте, что мне сделать, чтобы второй счётчик не слетел? Пожалуйста помогите

Denis Creative

Задать им разные id .

При этом весь скрипт копировать не нужно, просто инициализировать второй таймер отдельно initializeClock(‘countdown-2’, deadline);

Спасибо вам большое, Денис. Пост 17 года, а вы до сих пор помогаете другим. А таймер вообще очень хороший 🙂

Denis Creative

Рад, что информация на сайте полезна для кого-то)

Павел

Здравствуйте! Подскажите пожалуйста, нужен циклический таймер, на 15 дней, но чтобы при перезагрузке страницы время таймера не сбрасывалось. Возможно такое реализовать?

Denis Creative

Можно, если использовать куки.

Василий

Добрый день. Очень классный таймер. А подскажите, пожалуйста, как изменить функцию, чтобы если больше месяца, указывал месяцы и количество дней. я добавил в return getTimeRemaining months, в updateClock дописал if (t.months > 0) <
t.days = t.days – (30 * t.months);
>. Как Вы понимаете, все работает, но не учитывается количество дней в месяце, а всегда по умолчанию считает 30. нужно чуть допилить, но не знаю в какую сторону смотреть.
мой код https://codepen.io/vasylbakanovskyi/pen/eYOzEZZ

Алексей

Было бы круто если дописать вывод слов (дни, часы, минуты, секунды) на js и проверять текущее значение времени и выводить корректное слово например 43 минуты или 25 минут. Думаю посыл понятен.

Denis Creative

Тогда это уже не будет “Простой таймер обратного отсчета на Javascript”.

Соломон

Здравствуйте ! Спасибо за таймер. Подскажите , пожалуйста, как изменить код , чтоб число дней могло быть трёхзначным .
Спасибо.

Denis Creative

А в чем проблема?

Выводится трехзначное число

Соломон

Уважаемый Денис ! Большое спасибо за ответ . Дело в том , что я новичок (хотя мне больше 70).
Я много времени изучал код Вашего таймера , скопировал , что-то добавлял , но так и не получил результата .Читая комментарии . понял , что для обращения к Вам , полезно использовать codepen.io .Очень прошу , если найдёте время , найдите ошибку в моём коде
https://codepen.io/solomon-shmulevich/pen/dybdGdV . Заранее благодарю.

Denis Creative

Добрый день, подчистив немного Ваш код и заменив переменную deadline :
var deadline="January 01 2022 00:00:00 GMT+0300";
получаем вполне рабочий вариант с трехзначным форматом для дней.
В Codepen во вкладке HTML нужно добавлять только код HTML внутри тега , во вкладке CSS нужно следить за правильным открытием и закрытием скобок, а во вкладке JS не должно быть ничего лишнего кроме кода Javascript.

Соломон

Уважаемый Денис! Огромное спасибо! Желаю Вам здоровья и успехов!

Denis Creative

Олександр

Здравствуйте а как сделать так чтобы скрипт отсчитывал от введенной даты 7 дней и писал осталось
например ведена дата 2019-10-1 , отсчитывал этой даты 7 дней и выводил оставшихся дней, часов,… до читал до ноля после останавливался

Denis Creative

Просто немного изменить скрипт, или заказать нужный скрипт на фрилансе.

Олександр

вопрос как изменить)))

Олександр

или боле точнее вы может его так изменить? сам наверное не допру((((

Denis Creative

Извиняюсь, нет времени разбираться, может кто-то здесь ответит, но лучше обратиться на фриланс.

Олександр

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

Denis Creative

Да, конечно, успехов!

Алиса

А как остановить таймер, когда время закончится (будет значение во фронте 0:0:0:0, чтобы в минус не уходило)?

Сергей

Алиса, там же есть вверху пример номер 2, “Таймера обратного отсчета с выводом сообщения об истечении времени”, выводите что-то типа “ВремяИстекло!”

Сергей

Спасибо! Отлично! Встроил его в компонент в битриксе. Крутое и простое в реализации решение!

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

В данном уроке мы построим плагин jQuery для вывода таймера обратного отсчета. Он будет выводить количество оставшихся дней, часов, минут и секунд до определенного момента. Анимированное обновление счетчика совершается каждую секунду.

Плагин имеет имя “countdown” (в переводе на русский язык — "обратный отсчет"). Вызванный для пустого элемента, плагин будет заполнять его кодом HTML, необходимым для формирования дисплея таймера. Больше не надо ничего делать, только выбрать нужный элемент, в котором будет отображаться время.

Генерируемая разметка

В выше приведённом примере плагин вызван для элемента div с идентификатором countdown. Плагин добавляет ему класс countdownHolder (поэтому несколько стилей применяются к элементу с помощью кода CSS).

Рассмотрим разметку для цифр. Существует два элемента span с классом digit для каждой единицы времени (дни, часы, минуты и секунды), что налагает ограничения по обратному отсчету количества дней (не более 99).

Статический класс определяет для цифр градиентный фон и тени. При анимации данный класс удаляется, и CSS3 работает без замедления. Цифры объединены в группы, поэтому легко изменить стили для них. Например, добавление свойства font-size к классу .countDays будет влиять на обе цифры дня.

Элемент span .countDiv является разделителем между единицами времени. Двоеточие формируется с помощью псевдо элементов :before/:after .

А как генерируется разметка?

jQuery

Сначала сделаем вспомогательные функции, которые используются в плагине:

• init — генерирует разметку, которая приведена выше;
• switchDigit — получает элемент span . position и анимирует цифры внутри него.

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

assets/countdown/jquery.countdown.js

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

assets/countdown/jquery.countdown.js

Функция tick вызывает саму себя (рекурсия) каждую секунду. В ней мы вычисляем время между заданной точкой и текущим значением. Функция updateDuo затем обновляет цифры в соответствии с полученными данными.

Плагин готов! Теперь рассмотрим пример его использования (демонстрационная страница):

assets/js/script.js

Конечно, чтобы демонстрация заработала, нужно подключить файлы CSS и JavaScript из папки плагина к странице.

Заключение

Плагин можно использовать на страницах с информацией о каком-либо событии. Основными его преимуществом является полная реализация на CSS без изображений. Увеличение или уменьшение размера шрифта позволяет выделить нужные единицы времени. А для отключения ненужных единиц надо использовать свойство display:none в соответствующем классе.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tutorialzine.com/2011/12/countdown-jquery/
Перевел: Сергей Фастунов
Урок создан: 12 Января 2012
Просмотров: 141896
Правила перепечатки

5 последних уроков рубрики "jQuery"

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.