Простой таймер обратного отсчета на Javascript

10.09.2017

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

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

Рекомендую к прочтению:

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

Артём
21.04.2018
Я закопипастил код. В моем случае надо отсчитывать от 35 до 0 секунд. Таймер считает от 35 до 19 сек, а потом начинает считать в обратном порядке, от 19 до 60
Ответить
- Denis Creative
  22.04.2018
```
var deadline = new Date(Date.parse(new Date()) + 35 * 1000); 
```
  https://codepen.io/deniscreative/pen/BxorLB
  Ответить
Никита
17.05.2018
А как задать текущее время? Чтоб отсчет таймера шел от реально времени
Ответить
- Denis Creative
  17.05.2018
  Это таймер обратного отсчета. Что вы имеете в виду под “Чтоб отсчет таймера шел от реально времени”?
  Ответить
  - Никита
    17.05.2018
    Чтобы отсчет шел от времени которое на данный момент и до конечной даты
    Ответить
    
    Denis Creative
    17.05.2018
    var deadline="May 20 2018 00:00:00 GMT+0300";
    По такому примеру таймер будет отсчитывать время до 20 мая
    Ответить
Александр
21.05.2018
Подскажите как скрыть таймер когда время вышло?
Ответить
- Игорь
  16.08.2018
  https://stackoverflow.com/questions/34273373/javascript-countdown-time-formatting
  Ответить
  - Denis Creative
    20.08.2018
    Спасибо. Добавил код в статью.
    Ответить
    
    Игорь
    20.08.2018
    Это вам спасибо уже 3 заказ на фрилансе на основе этого кода )))
    Ответить
Николай
10.07.2018
Подскажите, как сделать, чтобы при перезагрузке страницы время таймера не сбрасывалось?
Ответить
- Denis Creative
  20.08.2018
  Таймер должен быть задан в таком случае на конкретную дату:
  var deadline="January 01 2019 00:00:00 GMT+0300";
  а не на текущее время + время таймера:
  var deadline = new Date(Date.parse(new Date()) + 35 * 1000);
  Ответить
Денис
06.10.2018
Здравствуйте, отличный таймер, то что надо, подскажите как зациклить таймер, что бы он досчитал до конца и начал заново считать ???
Ответить
- Denis Creative
  31.10.2018
  Приведите пример, что нужно. Потому как в статье описаны 2 варианта, которые требуются в 99% использования таймеров.
  Ответить
Денис
06.10.2018
Зациклить таймер можно ?
Ответить
Денис
31.10.2018
Так я же написал, что бы по окончанию счета он начал заново считать, а в примерах он заканчивает считать и показывается блок time the up
Ответить
- Denis Creative
  01.11.2018
  В примере с выводом сообщения об окончании времени нужно изменить код
  этот код
```
    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);
    }
```
  Рабочий пример добавил в статью
  Ответить
Денис
31.10.2018
Здравствуйте, а если такая задача: считать до определённого времени от текущая дата + N дней?
Ответить
- Denis Creative
  01.11.2018
  От текущей даты до + N дней такой код используется:
```
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
```
  15 – дни
  24 – часы
  60 – минуты
  Ответить
  - Александр
    03.12.2018
    Denis Creative, здравствуйте!
    Спасибо Вам за эту статью, она почти мне помогла.
    Хотелось бы узнать, если ли возможность чтобы счетчик сбрасывался на сайте каждые два дня Допустим я его выгружаю в 0:00 и он стартует на два дня и потом снова сбрасывается на два дня.
    Как я понял ваш вариант он запускается автоматически при загрузке старицы и другой каждый раз надо менять дату в коде.
    Ответить
    
    Denis Creative
    04.12.2018
    Нужно взять код таймера обратного отсчета времени с рестартом и поменять
    1. Конечную дату
    var deadline="December 01 2018 00:00:00 GMT+0300";
    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
    Ответить
Виталий
03.12.2018
Денис. А можете еще подсказать как сделать чтобы таймет продолжал считать в обратном направлении и при этом класс добавлялся к цифрам?
То-есть задача сделать что-то з 10 минут, таймер для тернировки. Если в 10 минут не укоадываются то красным идет обратный отсчет на сколько превысили время?
Ответить
- Denis Creative
  04.12.2018
  Мне кажется, этот таймер не совсем подходит под Вашу задачу.
  Ответить
Ivan
12.12.2018
Здравствуйте, подскажите пожалуйста как сделать чтобы отсчёт шел допустим 2012 года 1 января допустим и до бесконечности? посмотрел в data-countdown на гите , там у них есть пример, но как реализовать так и не понял..
Спасибо.
Ответить
- Denis Creative
  12.12.2018
  Не понял вопрос, как это до бесконечности?
  Таймер обратного отсчета предполагает, что есть конечная дата, и ведет отсчет до нее.
  Подсчет времени от какой-то даты до текущего момента, это простой таймер. Вам нужен просто таймер? Для этого нужен другой код.
  Ответить
Иван
24.01.2019
Подскажите, а как в скрипте указать отображение русского языка. У меня �� отображается когда меняю на русский текст
Ответить
- Denis Creative
  24.01.2019
```
<meta charset="UTF-8">
```
  не помогает?
  Ответить
  - Иван
    24.01.2019
    Стоит в шапке, все как надо. Причем вокруг текст на странице русский, нормально отображается, а вот именно текст скрипта ��
    Ответить
    
    Denis Creative
    24.01.2019
    Чет не пойму, какой текст скрипта? Если скрипт только цифры выводит…
    Ответить
    
    Иван
    24.01.2019
    Dvtcnj Countdown Clock русская фраза, и вместо Hours и пр. Руский шрифт коверкается.
    
    Denis Creative
    24.01.2019
    Эти фразы не в скрипте, а в HTML используются.
    Проверьте кодировку файла, чтобы там было UTF-8 без BOM.
санек
18.03.2019
как сделать чтобы он не запускался сам?
Ответить
- Denis Creative
  18.03.2019
  а как он должен запускаться?
  Ответить
  - санек
    10.04.2019
    с кнопки “start”
    Ответить
    
    Denis Creative
    10.04.2019
    это вам нужен обычный таймер, наверное
    Ответить
Владимир
31.03.2019
Добрый день. А как сделать чтобы счетчик времени начинался с 02 часов 35 мин 25 сек?
Ответить
Владимир
31.03.2019
точнее таймер с обратным отчетов начинался 02:35:24
Ответить
- Denis Creative
  31.03.2019
```
var deadline = new Date(Date.parse(new Date()) + 9324 * 1000);
```
  2*60*60 + 35*60 + 24 = 9324 секунды
  Ответить
Нурбек
23.04.2019
у меня ничего не выводит –
```
Uncaught TypeError: Cannot read property 'querySelector' of null
at initializeClock (counter.js:18)
at counter.js:43
```
Может устарела библиотека?
Ответить
- Denis Creative
  23.04.2019
  Тут нечему устаревать – проверьте свой HTML
  Ответить
- Павел
  29.04.2021
  Чтобы не возникала ошибка
```
Uncaught TypeError: Cannot read property 'querySelector' of null
```
  Необходимо поместить в конец страницы, перед закрывающим тэгом
  Эта ошибка чаще всего происходит, когда вы обращаетесь к свойствам объекта раньше, чем объект готов: Скорее всего, объект ещё не загрузился, а скрипт его требует прямо сейчас. Строка:
```
var clock = document.getElementById(id);
```
  Ответить
Анастасия
25.04.2019
А как сделать что бы таймер который по окончанию времени начинает отсчет заново (последний вариант) не скидывал время при обновлении страницы?
Т.е. мне надо чтоб он отсчитывал допусти 24 часа с 00:00:00 и в полночь отсчет опять обнулялся бы. А то сейчас получается что если ставить 12 часов отсчета при обновлении страницы опять 12 часов, а не 11:58
Ответить
- Denis Creative
  25.04.2019
  Ответ есть в этом комментарии
  Ответить
  - Анастасия
    25.04.2019
    Спасибо. Сначала почему то не получилось, но теперь все работает!
    Ответить
    
    Denis Creative
    25.04.2019
    Только там пример для 2-ух дней, вам нужно изменить 2 на 1, чтобы было для одного дня.
    Ответить
Максим
11.05.2019
Здравствуйте! Стоит такая задача. Таймер обратного отсчета, но что бы он отсчитывал до 15 числа каждого месяца до 19.00. Потом перезапускался и снова отсчитывал до 15 числа 19.00 следующего месяца. И так постоянно. Просто если поставить 30 дней а в месяце будет 31 то получиться что таймер не правильно будет считать
Ответить
- Denis Creative
  12.05.2019
  Напишите функцию, которая будет по текущему месяцу высчитывать правильное количество дней и время до окончания.
  Ответить
Андрей
26.05.2019
Здравствуйте! А как сделать так, что бы текущему времени добавить еще несколько секунд? Когда добавляю по кнопке запуск функции initializeClock(‘clockdiv’, deadline); – то считает уже два времени одновременно. Как остановить(убрать) первый отсчет времени? или обновить его
Ответить
- Denis Creative
  31.05.2019
  Создайте пример на Codepen – будет понятнее, что вы имеете в виду.
  Ответить
- Петро
  04.01.2022
  Когда цепляете запуск функции к кнопке, то убирайте запуск функции в конце самого кода таймера
  Ответить
Михайл
09.06.2019
Спасибо! То что нужно ) Искал, но попадалось всякое. Мне нужна была фишка с указыванием GMT+0300 а то для разных стран показывалось разные значения )
Ответить
Юрий
10.07.2019
Денис, здравствуйте. Смотрите, у меня два счётчика на сайте, что мне сделать, чтобы второй счётчик не слетел? Пожалуйста помогите
Ответить
- Denis Creative
  10.07.2019
  Задать им разные id.
  При этом весь скрипт копировать не нужно, просто инициализировать второй таймер отдельно initializeClock('countdown-2', deadline);
  Ответить
  - Юрий
    11.07.2019
    Спасибо вам большое, Денис. Пост 17 года, а вы до сих пор помогаете другим. А таймер вообще очень хороший :)
    Ответить
    
    Denis Creative
    12.07.2019
    Рад, что информация на сайте полезна для кого-то)
    Ответить
Павел
11.07.2019
Здравствуйте! Подскажите пожалуйста, нужен циклический таймер, на 15 дней, но чтобы при перезагрузке страницы время таймера не сбрасывалось. Возможно такое реализовать?
Ответить
- Denis Creative
  12.07.2019
  Можно, если использовать куки.
  Ответить
Василий
17.08.2019
Добрый день. Очень классный таймер. А подскажите, пожалуйста, как изменить функцию, чтобы если больше месяца, указывал месяцы и количество дней. я добавил в return getTimeRemaining months, в updateClock дописал if (t.months > 0) {
t.days = t.days – (30 * t.months);
}. Как Вы понимаете, все работает, но не учитывается количество дней в месяце, а всегда по умолчанию считает 30. нужно чуть допилить, но не знаю в какую сторону смотреть.
мой код https://codepen.io/vasylbakanovskyi/pen/eYOzEZZ
Ответить
Алексей
04.09.2019
Было бы круто если дописать вывод слов (дни, часы, минуты, секунды) на js и проверять текущее значение времени и выводить корректное слово например 43 минуты или 25 минут. Думаю посыл понятен.
Ответить
- Denis Creative
  04.09.2019
  Тогда это уже не будет “Простой таймер обратного отсчета на Javascript”.
  Ответить
Соломон
07.09.2019
Здравствуйте ! Спасибо за таймер. Подскажите , пожалуйста, как изменить код , чтоб число дней могло быть трёхзначным .
Спасибо.
Ответить
- Denis Creative
  07.09.2019
  А в чем проблема?
```
var deadline="January 01 2022 00:00:00 GMT+0300";
```
  Выводится трехзначное число
  Ответить
  - Соломон
    07.09.2019
    Уважаемый Денис ! Большое спасибо за ответ . Дело в том , что я новичок (хотя мне больше 70).
    Я много времени изучал код Вашего таймера , скопировал , что-то добавлял , но так и не получил результата .Читая комментарии . понял , что для обращения к Вам , полезно использовать codepen.io .Очень прошу , если найдёте время , найдите ошибку в моём коде
    https://codepen.io/solomon-shmulevich/pen/dybdGdV . Заранее благодарю.
    Ответить
    
    Denis Creative
    07.09.2019
    Добрый день, подчистив немного Ваш код и заменив переменную deadline:
    var deadline="January 01 2022 00:00:00 GMT+0300";
    получаем вполне рабочий вариант с трехзначным форматом для дней.
    В Codepen во вкладке HTML нужно добавлять только код HTML внутри тега <body>, во вкладке CSS нужно следить за правильным открытием и закрытием скобок, а во вкладке JS не должно быть ничего лишнего кроме кода Javascript.
    Ответить
    
    Соломон
    08.09.2019
    Уважаемый Денис! Огромное спасибо! Желаю Вам здоровья и успехов!
    
    Denis Creative
    08.09.2019
    Забыл выложить ссылку на codepen.
    https://codepen.io/deniscreative/pen/rNBJMvx
    Успехов!
    Ответить
Олександр
04.10.2019
Здравствуйте а как сделать так чтобы скрипт отсчитывал от введенной даты 7 дней и писал осталось
например ведена дата 2019-10-1 , отсчитывал этой даты 7 дней и выводил оставшихся дней, часов,… до читал до ноля после останавливался
Ответить
- Denis Creative
  04.10.2019
  Просто немного изменить скрипт, или заказать нужный скрипт на фрилансе.
  Ответить
Олександр
04.10.2019
вопрос как изменить)))
Ответить
Олександр
04.10.2019
или боле точнее вы может его так изменить? сам наверное не допру((((
Ответить
- Denis Creative
  04.10.2019
  Извиняюсь, нет времени разбираться, может кто-то здесь ответит, но лучше обратиться на фриланс.
  Ответить
Олександр
04.10.2019
понятно печально, спасибо за помощь врядли тут кто-та поможет, а можно взять ваш код и обратиться за помощью на другие ресурсы??
Ответить
- Denis Creative
  04.10.2019
  Да, конечно, успехов!
  Ответить
Алиса
02.11.2019
А как остановить таймер, когда время закончится (будет значение во фронте 0:0:0:0, чтобы в минус не уходило)?
Ответить
- Сергей
  13.11.2019
  Алиса, там же есть вверху пример номер 2, “Таймера обратного отсчета с выводом сообщения об истечении времени”, выводите что-то типа “ВремяИстекло!”
  Ответить
Сергей
13.11.2019
Спасибо! Отлично! Встроил его в компонент в битриксе. Крутое и простое в реализации решение!
Ответить

Розалия

10.12.2019

Здравствуйте.
Встроила таймер на свой сайт, чтобы каждый день с 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
12.12.2019
Не знаю, на сколько получилось правильно, но вот пример – 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);
  }
}
```
Ответить
- Розалия
  27.12.2019
  Спасибо большое! Всё работает правильно.
  Ответить
- Александр
  28.05.2020
  Денис, здравствуйте а как сделать так же только 2 дня.
  А то тот что выше не работает(
  Ответить
  - Denis Creative
    28.05.2020
    Всё работало, сделайте на codepen пример, будет видно, что не работает и почему.
    Ответить

viktor
15.01.2020
всё отлично работает.Скрипт вставил себе на сайт, и просто повставлял себе в код ID и class, и все отлично заработало!!!Спасибо.
Ответить
Dennis
05.03.2020
Денис, спасибо вам за данный таймер, но есть проблема его отображения в Firefox, вместо отсчета выводится выводится nAn, все остальное aN. Я пробовал вывести в консоль переменную t она выводит NaN . Как это исправить?
Ответить
- Denis Creative
  05.03.2020
  Проверьте все классы и их правильное использование в javascript-коде. Данный таймер работает во всех браузерах.
  Ответить
  - Dennis
    05.03.2020
    Вопрос решил! Была проблема с форматом даты, вместо “March 15 2020 00:00:00 GMT+0300” я указал ‘Sun, 15 Mar 2020 00:00:00 GMT’ и таймер заработал
    Ответить
    
    Denis Creative
    06.03.2020
    Отлично! Успехов!)
    Ответить
Виктор
15.03.2020
Интересный модуль, но есть вопрос. Можно как то на сайте добавить 2 раза тот же модуль 1 с тайм енд с текстом об етом и 2 с тайм рестарт? У меня конфликт получается.
Ответить
- Denis Creative
  16.03.2020
  добавить разные ID для блоков таймеров и соответственно, и будет 2 функции
```
function initializeClock(id, endtime) {// тут будет код для функции с выводом сообщения}
function initializeClockAlt(id, endtime) {// тут будет код для функции с рестартом}
```
  и будут две инициализации
```
initializeClock('countdown', deadline); // инициализируем таймер с выводом сообщения
initializeClockAlt('countdown-alt', deadline); // инициализируем таймер с рестартом
```
  В HTML будет 2 таймера
```
<div id='countdown' class='countdown'>
...
</div>
```
  и
```
<div id='countdown-alt' class='countdown'>
...
</div>
```
  Остальной код по идее можно оставить. Главная идея в разных ID.
  Ответить
  - Виктор
    18.03.2020
    проверяю по разному но нет отображения времени,что то видимо не так.
    Ответить
    
    Denis Creative
    23.03.2020
    Проверьте классы, id, и код в скрипте.
    Ответить
Vadim
26.03.2020
Добрый день, все круто, спасибо.
Но есть один момент. Стоит задача сделать таймер на два времени.
12:00 и 20:00 то есть как только время достигает 12:00 таймер должен начинать считать до 20:00 и такое период каждый день.
За ранее спасибо.
Ответить
- Denis Creative
  26.03.2020
  Обратитесь на фриланс, я делал разные варианты только для часто используемых таймеров.
  Ответить
Bublik
28.03.2020
Спасибо за таймер, благодаря тебе выполнил около десятка версток с знанием лишь html/css))
Ответить
- Denis Creative
  28.03.2020
  Успехов! Но jquery тоже желательно подучить, там ничего сложного нету.
  Ответить
Ксения
10.04.2020
Спасибо, все понятно и просто
Ответить
ПОМОГИ
16.04.2020
ПОЧЕМУ У МЕНЯ НЕ РАБОТАЕТ ТАЙМЕР ЧТО НАДА ДЕЛАТЬ ПЛИЗ ПОМОГИ
Ответить
- Denis Creative
  16.04.2020
  В статье все подробно расписано. Нужно HTML код вставить в свой HTML файл, а CSS в свой файл стилей, javascript нужно закинуть в свой файл скриптов и не забыть подключить jquery. Все просто.
  Ответить
  - Александр
    24.06.2021
    Не работает все равно
    Ответить
Сергей
22.04.2020
При попытке отписаться от комментариев в этой ветке у тебя на сайте возникает ошибка.
Ответить
- Denis Creative
  22.04.2020
  Спасибо за сообщение.
  Отключил плагин Subscribe to Comments – он устарел походу.
  Ответить

Елена

17.05.2020

Здравствуйте!
Спасибо за Ваш таймер, получилось его настроить под свои нужды, но беда в том, что мне нужно его сбрасывать, если пользователь логинится на сайте.
То есть, я при инициализации автоизации вызываю функцию cancelTimer

function cancelTimer() {
    let deadline = new Date(); 
    initializeClock('countdown', deadline);
}

в надежде, что отработает if в функции initializeClock и таймер очистится.
Но почему-то clearInterval(timeInterval); не отрабатывает.
Я думала, что это из-за области видимости, но у меня никак не получается с этим разобраться, даже если вынести let timeInterval из функции в глобальную область видимости.

Вот мой код инициализации таймера:

function initializeClock(id, endtime) {
    let clock = document.getElementById(id);
    let minutesSpan = clock.querySelector('.countdown-number--minutes');
    let secondsSpan = clock.querySelector('.countdown-number--seconds');

    function updateClock() {
        let t = getTimeRemaining(endtime);

        if (t.total <= 0) {
            formWrapper.classList.remove('is-blocked'); 
            msgErrorConstraints.classList.remove('is-active'); // убираю видимость таймера
            clearInterval(timeInterval); // здесь должен таймер очищаться, но он этого не делает
            minutesSpan.innerHTML = '00';
            secondsSpan.innerHTML = '00'; // обнуляю значения таймера, чтобы при перезагрузке страницы он в минус не уходил, если истек
            localStorage.removeItem('wadereav'); // здесь удаляю значения таймера, тк он у меня должен работать 1 час даже если страница закрыта.
            localStorage.setItem('thermont', 1);
            form.reset();
        }
        else {
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
        }
    }
    updateClock();
    let timeInterval = setInterval(updateClock, 1000);
}

Буду очень благодарна за любую подсказку

Ответить

Женя
17.07.2020
скажите почему нечего не работает все подключил и ввел. А таймер не запускается???????????????????????????
Ответить
- Denis Creative
  17.07.2020
  Залейте страницу со всем кодом таймера на какой-нибудь тестовый сервер, чтобы можно было ответить.
  У всех работает, значит нужно искать у вас ошибку.
  Ответить
ИльяС
23.07.2020
Ништяк бро! Спс!
Ответить
- Denis Creative
  24.07.2020
  Пжлйст, залетай ещё!
  Ответить
Andrew
24.07.2020
Странно, реально не работает. Всё сделано копипастом.
Ответить
Andrew
24.07.2020
Вот репозиторий:
github.com/smartbit45/test
Вот сайт уже с хоста:
smartbit45.github.io/test/
Что тут может быть не так?
Ответить
- Denis Creative
  24.07.2020
  поместите скрипт в самый низ html перед закрывающимся </body>
  Ответить
  - Andrew
    24.07.2020
    Спасибо, работает! У меня руки из “того” места.
    Ответить
  - Andrew
    24.07.2020
    Вопрос такого плана: как сделать чтобы после обновлении страницы счетчик продолжал работать, а не обнулялся, и обнулялся только по достижении дедлайна.
    Ответить
    
    Denis Creative
    24.07.2020
    Чтобы он не обнулялся после перезагрузки, нужно указать дату окончания отсчета
    var deadline = 'December 31 2020';
    Больше примеров в статье.
    Ответить
Kozka
17.09.2020
Здравствуйте, Denis Creative!
Как сделать таймер отсчета времени от события до настоящего времени?
Ответить
- Denis Creative
  20.09.2020
  Ну, можно было бы проявить немного фантазии и поменять одну переменную:
```
var t =  Date.parse(new Date()) - Date.parse(endtime);
```
  при этом deadline должен быть задан в формате даты:
```
var deadline="January 01 2020 00:00:00 GMT+0300";
```
  Живой пример – codepen.io/deniscreative/pen/BaKGNLd
  Ответить
Александр
02.10.2020
я просто поблагодарю…
все получилось с множественным размещением (элементы с обратным отсчетом времени)…
просто и доступно…
Ответить
- Denis Creative
  02.10.2020
  Спасибо и успехов!)
  Ответить
Анна
08.10.2020
Денис, здравствуйте! Подскажите пожалуйста, какой html код нужно вставить, чтобы на Тильде автоматически продлевалась акция на таймере? Например, чтобы заходя на сайт 9 октября, там показывалось ” акция действует до 10 октября” , а зайдя на следующий день (10 октября) было написано “акция действует до 11 октября” и так далее
Ответить
- Denis Creative
  08.10.2020
  Такой deadline будет выдавать, что осталось 23 часа до окончания таймера:
```
var deadline = new Date(Date.parse(new Date()) + 1 * 23 * 60 * 60 * 1000);
```
  Ответить

Виктор

18.11.2020

Вопрос!? Можно как то указать например в таймере обратного отсчета времени с рестартом чтоб при одном периоде

document.getElementById("deadline-message").className = "visible";

а после отсчета второго таймера рестарта

document.getElementById("deadline-message").className = "hidden";

Ответить

Denis Creative

18.11.2020

Можно добавить флаг при первом рестарте, затем проверять его параметры.

Ответить

Виктор

18.11.2020

пробовал так что то не правильно флаг не повлиял

   if (t.total <= 0 || flag == false) {
      document.getElementById("deadline-message").className = "visible";
      clearInterval(timeinterval);
      return true;

     var deadline = new Date(Date.parse(new Date()) + 5 * 1000);
      initializeClock('countdown', deadline);
  } else {
     document.getElementById("deadline-message").className = "hidden";
      clearInterval(timeinterval);
      return true;

     var deadline = new Date(Date.parse(new Date()) + 5 * 1000);
      initializeClock('countdown', deadline);
}

Ответить

Кирилл
27.11.2020
Подскажите пожалуйста, а как сделать чтобы по истечению времени был переход на внешнюю страницу?
Ответить
psina
08.12.2020
как сделать по истечению не всего таймера, чтобы счетчик перезапускался, а до приближенения 10 минут:
Ответить
- Denis Creative
  10.12.2020
  заказать на фрилансе скрипт
  Ответить
eugene
28.01.2021
Подскажи пожалуйста, я добавил поле type=”date” , чтоб выбирать дату и кнопку запуска, выполняющую initializeClock. Как мне сделать сброс всех значений при нажатии кнопки?
Спасибо.
Ответить
- Denis Creative
  30.01.2021
  Добавьте код на Codepen, чтобы видеть, что вы сделали. И какая логика этого скрипта?
  Ответить
Диитрий
09.03.2021
А как сделать, чтобы он наоборот считал прошедшие дни от даты?
Ответить
Григорий
25.05.2021
Странно, у меня даже с тестового не работает сайта, что предоставлен выше.
Ответить
- Denis Creative
  25.05.2021
  Всё по прежнему работает.
  Может у вас отключен JavaScript в браузере?
  Ответить
Александр
24.06.2021
Не работает. И jquery подключил. Все равно.
Ответить
- Denis Creative
  29.06.2021
  Покажите ссылку на готовый сайт или тестовый сервер.
  Скрипт рабочий.
  Вы что-то неправильно делаете.
  Ответить
Алекс
23.09.2021
Доброго времени суток!
Тут отредактировал код под себя – все ок, работает. При размещении на сайте (Tilda) не показывает цифры (не разворачивается).
Обновил страницу, разместил без своих правок, в исходном формате – проблема осталась.
Ссылка на страницу – ou-improve.tilda.ws/page22229307.html
Библиотеку подключал актуальную –
Ответить
- Алекс
  23.09.2021
  Библиотека –
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```
  Ответить
- Denis Creative
  25.09.2021
  Скрипт таймера выдаёт 404 Not Found
  Ответить
Алексей
13.12.2021
Подскажите а для такого чтобы остановить отсчёт какой метод в данном примере можно использовать?
Ответить
- Denis Creative
  13.12.2021
  Приведите пример, для чего это нужно и какая логика остановки – по кнопке, при заходе на страницу или еще какие варианты.
  Ответить
Макс
28.12.2021
Денис, подскажите как добавить в таймер с рестартом в днях 0 впереди?
И можно ли как то цифры во всех 4х блоках обернуть в span для стилизации? в дизайне каждая цифра в отдельном блоке…
Ответить
- Denis Creative
  28.12.2021
  как добавить в таймер с рестартом в днях 0 впереди?
  нужно заменить
```
daysSpan.innerHTML = t.days;
```
  на
```
daysSpan.innerHTML = ("0" + t.days).slice(-2);
```
  можно ли как то цифры во всех 4х блоках обернуть в span для стилизации?
  можно как угодно переверстать таймер, главное использовать классы для чисел
```
.days, .hours, .minutes, .seconds
```
  Ответить
  - Макс
    28.12.2021
    да супер спасибо. с днями как раз вот только дошло до меня.
    на счет общего класса у блоков это понятно, но внутри него оба символа.
    т.е.
    <span class="days countdown-time">05</span>
    а нужно чтобы было
    <span class="days tm-countdown__time"> <span>0</span><span>5</span> </span>
    еще посмотрел по комментам на счет обновления страницы. у меня этот таймер при обновлении страницы заново начитает отсчет. это только с куки надо связывать? или я чего-то не понял?
    Ответить
    
    Denis Creative
    28.12.2021
    Посмотрите в этом комментарии – https://denis-creative.com/jstimer/#comment-11452
    в таком формате
    var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
    дата сбрасывается при перезагрузке страницы.
    В таком формате
    ar deadline="January 01 2018 00:00:00 GMT+0300";
    дата не сбрасывается при перезагрузке, а отсчитывает до дедлайна.
    Нужно указать дедлайн на конкретную дату и добавить перезапуск в случае, если дата уже прошла на сутки.
    Ответить
    
    Denis Creative
    28.12.2021
    можно ли как то цифры во всех 4х блоках обернуть в span для стилизации?
    честно говоря, не знаю, как разделить на спаны числа в скрипте.
    Но для стилизации можно указать общие правила для числа (.countdown-time), и отдельно правила для первой цифры:
    .countdown-time:first-letter { color: red; font-size: 2em }
    Ответить
Артем
30.01.2022
Здравствуйте,подскажите пожалуйста как сделать дедлайн чтоб был до конца дня,заранее спасибо)
Ответить
- Denis Creative
  07.02.2022
  Ответ есть в этом комментарии
  Ответить
Сергей
27.04.2022
Спасибо за крутой скрипт. Не подскажите если например 10 таймеров сделать на странице, то для кажлдго время задать и как для каждого вывести сообщение когда таймер закончиться.
Спасибо!
Ответить

Оставить комментарий

Простой таймер обратного отсчета на Javascript

HTML

CSS

Javascript

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

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

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

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

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

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

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

Артём

Никита

Никита

Александр

Игорь

Игорь

Николай

Денис

Денис

Денис

Денис

Александр

Виталий

Ivan

Иван

Иван

Иван

санек

санек

Владимир

Владимир

Нурбек

Павел

Анастасия

Анастасия

Максим

Андрей

Петро

Михайл

Юрий

Юрий

Павел

Василий

Алексей

Соломон

Соломон

Соломон

Олександр

Олександр

Олександр

Олександр

Алиса

Сергей

Сергей

Розалия

Розалия

Александр

viktor

Dennis

Dennis

Виктор

Виктор

Vadim

Bublik

Ксения

ПОМОГИ

Александр

Сергей

Елена

Женя

ИльяС

Andrew

Andrew

Andrew

Andrew

Kozka

Александр

Анна

Виктор