Самый простой и удобный таймер обратного отсчета
HTML
<h1 class="countdown-title">Countdown Clock</h1>
<div id="countdown" class="countdown">
<div class="countdown-number">
<span class="days countdown-time"></span>
<span class="countdown-text">Days</span>
</div>
<div class="countdown-number">
<span class="hours countdown-time"></span>
<span class="countdown-text">Hours</span>
</div>
<div class="countdown-number">
<span class="minutes countdown-time"></span>
<span class="countdown-text">Minutes</span>
</div>
<div class="countdown-number">
<span class="seconds countdown-time"></span>
<span class="countdown-text">Seconds</span>
</div>
</div>
CSS
body {
text-align: center;
background: #00ecb9;
font-family: sans-serif;
font-weight: 100;
}
.countdown-title {
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
.countdown {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
.countdown-number {
padding: 10px;
border-radius: 3px;
background: #00bf96;
display: inline-block;
}
.countdown-time {
padding: 15px;
border-radius: 3px;
background: #00816a;
display: inline-block;
}
.countdown-text {
display: block;
padding-top: 5px;
font-size: 16px;
}
Javascript
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);
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);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); // for endless timer
initializeClock('countdown', deadline);
Указываем дату окончания работы таймера
Формат вывода даты ISO 8601:
var deadline = '2015-12-31';
Сокращенный формат:
var deadline = '31/12/2015';
Длинный формат:
var deadline = 'December 31 2015';
Вывод даты с точным временем и часовым поясом:
var deadline="January 01 2018 00:00:00 GMT+0300";
Вывод таймера для лендингов — таймер все время будет выводить, что осталось 15 дней (можно указать любое время)
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
Рабочий пример Таймера обратного отсчета
See the Pen Styled JavaScript Countdown Clock by Denis (@deniscreative) on CodePen.0
Скрываем таймер после окончания времени и выводим сообщение, что время истекло
Данное решение предложил в комментариях Игорь.
Добавляем в HTML блок с сообщением
<div id="deadline-message" class="deadline-message"> Time is up! </div>
Добавляем такие стили в CSS:
.deadline-message{
display: none;
font-size: 24px;
font-style: italic;
}
.visible{
display: block;
}
.hidden{
display: none;
}
В скрипте меняем функцию инициализации таймера function initializeClock(id, endtime) {...}, остальное оставляем так же, как было:
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 <= 0) {
document.getElementById("countdown").className = "hidden";
document.getElementById("deadline-message").className = "visible";
clearInterval(timeinterval);
return true;
}
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);
}
В данной функции изменилось то, что при истечении времени таймера, на сам таймер добавляется класс .hidden (скрывает таймер), а на сообщение об окончании времени вешается класс .visible (отображает сообщение), а так же прекращаем выполнение функции вызовом метода clearInterval(timeinterval);. А вывод единиц времени помещен после проверки истекло время или нет.
Рабочий пример Таймера обратного отсчета с выводом сообщения об истечении времени
See the Pen Styled JavaScript Countdown Clock with End-time messadge by Denis (@deniscreative) on CodePen.0
Нажмите кнопку Rerun, чтобы убедиться, что все работает как надо.
Таймер обратного отсчета времени с рестартом
Суть таймера в том, что при окончании времени таймер не останавливается, не выводится никакое сообщение, а просто начинается новый отсчет:
Таймер установлен на 5 секунд и при окончании времени будет перезапущен еще на 5 секунд
Код JS
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 <= 0) {
clearInterval(timeinterval);
var deadline = new Date(Date.parse(new Date()) + 5 * 1000);
initializeClock('countdown', deadline);
}
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);
Разница в JS-коде между вариантом с выводом сообщения об окончании времени только в замене этого кода
if (t.total <= 0) {
document.getElementById("countdown").className = "hidden";
document.getElementById("deadline-messadge").className = "visible";
clearInterval(timeinterval);
return true;
}
на этот:
if (t.total <= 0) {
clearInterval(timeinterval);
var deadline = new Date(Date.parse(new Date()) + 5 * 1000);
initializeClock('countdown', deadline);
}
Обратите внимание, что при обнулении таймера нам нужно задать новый дедлайн, и он может быть совсем другим, чем первоначальный, который указан на предпоследней строке кода:
var deadline = new Date(Date.parse(new Date()) + 5 * 1000);
Рабочий пример таймера обратного отсчета времени с рестартом
See the Pen Styled JavaScript Countdown Clock with Restart by Denis (@deniscreative) on CodePen.0
Комментарии (132) к “Простой таймер обратного отсчета на Javascript”
Артём
Я закопипастил код. В моем случае надо отсчитывать от 35 до 0 секунд. Таймер считает от 35 до 19 сек, а потом начинает считать в обратном порядке, от 19 до 60
Denis Creative
https://codepen.io/deniscreative/pen/BxorLB
Никита
А как задать текущее время? Чтоб отсчет таймера шел от реально времени
Denis Creative
Это таймер обратного отсчета. Что вы имеете в виду под «Чтоб отсчет таймера шел от реально времени»?
Никита
Чтобы отсчет шел от времени которое на данный момент и до конечной даты
Denis Creative
По такому примеру таймер будет отсчитывать время до 20 мая
Александр
Подскажите как скрыть таймер когда время вышло?
Игорь
https://stackoverflow.com/questions/34273373/javascript-countdown-time-formatting
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 upDenis Creative
В примере с выводом сообщения об окончании времени нужно изменить код
этот код
if (t.total <= 0) { document.getElementById("clockdiv").className = "hidden"; document.getElementById("deadline-messadge").className = "visible"; clearInterval(timeinterval); return true; }заменить на этот:
if (t.total <= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock('clockdiv', deadline); }Рабочий пример добавил в статью
Денис
Здравствуйте, а если такая задача: считать до определённого времени от текущая дата + N дней?
Denis Creative
От текущей даты до + N дней такой код используется:
15 — дни
24 — часы
60 — минуты
Александр
Denis Creative, здравствуйте!
Спасибо Вам за эту статью, она почти мне помогла.
Хотелось бы узнать, если ли возможность чтобы счетчик сбрасывался на сайте каждые два дня Допустим я его выгружаю в 0:00 и он стартует на два дня и потом снова сбрасывается на два дня.
Как я понял ваш вариант он запускается автоматически при загрузке старицы и другой каждый раз надо менять дату в коде.
Denis Creative
Нужно взять код таймера обратного отсчета времени с рестартом и поменять
1. Конечную дату
2. Обновление конечной даты после истечения срока действия таймера
if (t.total <= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(endtime) + 2 * 24 * 60 * 60 * 1000); initializeClock('clockdiv', deadline); }Получится примерно такой код, не знаю, на сколько правильный, но вроде работает:
https://codepen.io/deniscreative/pen/BGEqdM
Виталий
Денис. А можете еще подсказать как сделать чтобы таймет продолжал считать в обратном направлении и при этом класс добавлялся к цифрам?
То-есть задача сделать что-то з 10 минут, таймер для тернировки. Если в 10 минут не укоадываются то красным идет обратный отсчет на сколько превысили время?
Denis Creative
Мне кажется, этот таймер не совсем подходит под Вашу задачу.
Ivan
Здравствуйте, подскажите пожалуйста как сделать чтобы отсчёт шел допустим 2012 года 1 января допустим и до бесконечности? посмотрел в data-countdown на гите , там у них есть пример, но как реализовать так и не понял..
Спасибо.
Denis Creative
Не понял вопрос, как это до бесконечности?
Таймер обратного отсчета предполагает, что есть конечная дата, и ведет отсчет до нее.
Подсчет времени от какой-то даты до текущего момента, это простой таймер. Вам нужен просто таймер? Для этого нужен другой код.
Иван
Подскажите, а как в скрипте указать отображение русского языка. У меня ����������� отображается когда меняю на русский текст
Denis Creative
не помогает?
Иван
Стоит в шапке, все как надо. Причем вокруг текст на странице русский, нормально отображается, а вот именно текст скрипта ������������ ��������
Denis Creative
Чет не пойму, какой текст скрипта? Если скрипт только цифры выводит…
Иван
Dvtcnj Countdown Clock русская фраза, и вместо Hours и пр. Руский шрифт коверкается.
Denis Creative
Эти фразы не в скрипте, а в HTML используются.
Проверьте кодировку файла, чтобы там было UTF-8 без BOM.
санек
как сделать чтобы он не запускался сам?
Denis Creative
а как он должен запускаться?
санек
с кнопки «start»
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 внутри тега<body>, во вкладкеCSSнужно следить за правильным открытием и закрытием скобок, а во вкладкеJSне должно быть ничего лишнего кроме кода Javascript.Соломон
Уважаемый Денис! Огромное спасибо! Желаю Вам здоровья и успехов!
Denis Creative
Забыл выложить ссылку на codepen.
https://codepen.io/deniscreative/pen/rNBJMvx
Успехов!
Олександр
Здравствуйте а как сделать так чтобы скрипт отсчитывал от введенной даты 7 дней и писал осталось
например ведена дата 2019-10-1 , отсчитывал этой даты 7 дней и выводил оставшихся дней, часов,… до читал до ноля после останавливался
Denis Creative
Просто немного изменить скрипт, или заказать нужный скрипт на фрилансе.
Олександр
вопрос как изменить)))
Олександр
или боле точнее вы может его так изменить? сам наверное не допру((((
Denis Creative
Извиняюсь, нет времени разбираться, может кто-то здесь ответит, но лучше обратиться на фриланс.
Олександр
понятно печально, спасибо за помощь врядли тут кто-та поможет, а можно взять ваш код и обратиться за помощью на другие ресурсы??
Denis Creative
Да, конечно, успехов!
Алиса
А как остановить таймер, когда время закончится (будет значение во фронте 0:0:0:0, чтобы в минус не уходило)?
Сергей
Алиса, там же есть вверху пример номер 2, «Таймера обратного отсчета с выводом сообщения об истечении времени», выводите что-то типа «ВремяИстекло!»
Сергей
Спасибо! Отлично! Встроил его в компонент в битриксе. Крутое и простое в реализации решение!
Розалия
Здравствуйте.
Встроила таймер на свой сайт, чтобы каждый день с 00:00 отчитывало заново. При переходе на следующий день в блоке «день» при новой загрузке страницы каждый раз на 2-3секунды выходит значение -1, потом всё исправляется и показывает правильно 0. При этом часы, минуты, секунды считает правильно.
Что надо исправить? подскажите, пожалуйста
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 <= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(endtime) + 1 * 24 * 60 * 60 * 1000); initializeClock('clockdiv', deadline); } 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="December 10 2019 00:00:00 GMT+0500"; initializeClock("clockdiv", deadline);Denis Creative
Не знаю, на сколько получилось правильно, но вот пример — https://codepen.io/deniscreative/pen/xxbORRP
Нужно поменять функцию
updateClock()function updateClock() { var t = getTimeRemaining(endtime); if (t.total <= 0) { clearInterval(timeinterval); var newTime = Date.parse(endtime); var nowTime = Date.parse(new Date()); while (newTime <= nowTime) { newTime = newTime + 1 * 24 * 60 * 60 * 1000; // add 24hours } var deadline = new Date(newTime); initializeClock('countdown', deadline); } else { 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); } }Розалия
Спасибо большое! Всё работает правильно.
Александр
Денис, здравствуйте а как сделать так же только 2 дня.
А то тот что выше не работает(
Denis Creative
Всё работало, сделайте на codepen пример, будет видно, что не работает и почему.
viktor
всё отлично работает.Скрипт вставил себе на сайт, и просто повставлял себе в код ID и class, и все отлично заработало!!!Спасибо.
Dennis
Денис, спасибо вам за данный таймер, но есть проблема его отображения в Firefox, вместо отсчета выводится выводится nAn, все остальное aN. Я пробовал вывести в консоль переменную t она выводит NaN . Как это исправить?
Denis Creative
Проверьте все классы и их правильное использование в javascript-коде. Данный таймер работает во всех браузерах.
Dennis
Вопрос решил! Была проблема с форматом даты, вместо «March 15 2020 00:00:00 GMT+0300» я указал ‘Sun, 15 Mar 2020 00:00:00 GMT’ и таймер заработал
Denis Creative
Отлично! Успехов!)
Виктор
Интересный модуль, но есть вопрос. Можно как то на сайте добавить 2 раза тот же модуль 1 с тайм енд с текстом об етом и 2 с тайм рестарт? У меня конфликт получается.
Denis Creative
добавить разные ID для блоков таймеров и соответственно, и будет 2 функции
function initializeClock(id, endtime) {// тут будет код для функции с выводом сообщения} function initializeClockAlt(id, endtime) {// тут будет код для функции с рестартом}и будут две инициализации
initializeClock('countdown', deadline); // инициализируем таймер с выводом сообщения initializeClockAlt('countdown-alt', deadline); // инициализируем таймер с рестартомВ HTML будет 2 таймера
и
Остальной код по идее можно оставить. Главная идея в разных ID.
Виктор
проверяю по разному но нет отображения времени,что то видимо не так.
Denis Creative
Проверьте классы, id, и код в скрипте.
Vadim
Добрый день, все круто, спасибо.
Но есть один момент. Стоит задача сделать таймер на два времени.
12:00 и 20:00 то есть как только время достигает 12:00 таймер должен начинать считать до 20:00 и такое период каждый день.
За ранее спасибо.
Denis Creative
Обратитесь на фриланс, я делал разные варианты только для часто используемых таймеров.
Bublik
Спасибо за таймер, благодаря тебе выполнил около десятка версток с знанием лишь html/css))
Denis Creative
Успехов! Но jquery тоже желательно подучить, там ничего сложного нету.
Ксения
Спасибо, все понятно и просто
ПОМОГИ
ПОЧЕМУ У МЕНЯ НЕ РАБОТАЕТ ТАЙМЕР ЧТО НАДА ДЕЛАТЬ ПЛИЗ ПОМОГИ