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

Javascript. Таймер обратного отсчета
Таймер обратного отсчета на javascript. Не требует подключения дополнительных библиотек.

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

Таймер запускает функция coundown(), которая  запускает отсчет начиная с текущей даты до даты указанной в параметрах. Порядок параметров следующий: секунда , час , минута , день, месяц , год. Если какой-то из параметров не указан будет приниматься текущее значение времени. Если указан только один параметр то таймер будет отсчитывать время в секундах заданное этим параметром, то-есть фактически будет работать как секундомер.

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

function countDown(second,endMinute,endHour,endDay,endMonth,endYear) {
var now = new Date();
second = (arguments.length == 1) ? second + now.getSeconds() : second;
endYear =  typeof(endYear) != 'undefined' ?  endYear : now.getFullYear();            
endMonth = endMonth ? endMonth - 1 : now.getMonth();  //номер месяца начинается с 0   
endDay = typeof(endDay) != 'undefined' ? endDay :  now.getDate();    
endHour = typeof(endHour) != 'undefined' ?  endHour : now.getHours();
endMinute = typeof(endMinute) != 'undefined' ? endMinute : now.getMinutes();   
//добавляем секунду к конечной дате (таймер показывает время уже спустя 1с.) 
var endDate = new Date(endYear,endMonth,endDay,endHour,endMinute,second+1); 
var interval = setInterval(function() {	//запускаем таймер с интервалом 1 секунду
	var time = endDate.getTime() - now.getTime();
	if (time < 0) {						//если конечная дата меньше текущей
		clearInterval(interval);
		alert("Неверная дата!");			
	} else {			
		var days = Math.floor(time / 864e5);
		var hours = Math.floor(time / 36e5) % 24; 
		var minutes = Math.floor(time / 6e4) % 60;
		var seconds = Math.floor(time / 1e3) % 60;	
		var digit='<div style="width:70px;float:left;text-align:center">'+
		'<div style="font-family:Stencil;font-size:65px;">';
		var text='</div><div>'
		var end='</div></div><div style="float:left;font-size:45px;">:</div>'
		document.getElementById('mytimer').innerHTML = '<div>осталось: </div>'+
		digit+days+text+'Дней'+end+digit+hours+text+'Часов'+end+
		digit+minutes+text+'Минут'+end+digit+seconds+text+'Секунд';
		if (!seconds && !minutes && !days && !hours) {				
			clearInterval(interval);
			alert("Время вышло!");				
		}			
	}
	now.setSeconds(now.getSeconds() + 1); //увеличиваем текущее время на 1 секунду
}, 1000);
}
countDown(30); //устанавливаем таймер на 30 секунд		
 

 

Комментарии

    Коментарий от: Даниил

    Дата: 11.07.2017, 13:06:49
  • От души парень, я на работе голову ломал как сделать нормально
    Ответить
  • Коментарий от: MOHAX

    Дата: 18.02.2016, 9:04:39
  • Подскажите как взять дату из таблицы мускуля(mysql) и впихнуть его в этот счётчик. я уже голову сломал
    Ответить
  • Коментарий от: Владислав

    Дата: 08.11.2015, 0:29:28
  • Помогите пожалуйста! Как сделать, что бы при обновлении скрипт заново не начинал считать? Заранее благодарю
    Ответить
  • Коментарий от: Дмитрий

    Дата: 05.11.2015, 17:08:57
  • Не работает :=(
    Ответить
  • Коментарий от: Из Казахстана

    Дата: 10.09.2015, 9:44:32
  • Большой рахмет!!!
    Нашел то, что было нужно мне!
    Вы мне очень помогли своим скриптом!
    Всегда был уверен, что в России очень крутые программисты!
    Желаю Вам дальнейших творческих успехов!
    Еще раз, СПАСИБО!!!
    Ответить
  • Коментарий от: Александр

    Дата: 08.09.2015, 14:31:24
  • Огромное спасибо
    Ответить
  • Коментарий от: Альберт

    Дата: 09.08.2015, 23:48:20
  • Здравствуйте!
    Спасибо вам.
    Подскажите пожалуйста, почему когда я обновляю страницу у меня секунды остаются такими же(к примеру при каждом обновлении страницы секунда принимает значение 40 и опять ведеться от неё отсчёт),хотя минуты ,часы ,дни нормально считаются
      admin
      Коментарий от: admin

      Дата: 16.08.2015, 23:24:23
    • Если указать только один параметр то таймер отсчитывает количество секунд от текущего времени, ели вы указываете конктрентую дату, то время отсчитывается до этой даты
      Ответить
    Ответить
  • Коментарий от: tomplus

    Дата: 12.07.2015, 16:41:12
  • Спасибо, во всём разобрался и легко установил счетчик на сайт! Пока работает без проблем. Послежу и попозже ещё напишу.
    Ответить
  • Коментарий от: Триш

    Дата: 12.07.2015, 12:23:02
  • Нашла минус, нельзя поставить таймер до полуночи. Нулевой час или нулевая минута трансформируются в текущий час.
      admin
      Коментарий от: admin

      Дата: 16.08.2015, 23:14:29
    • поправил немного скрипт
      Ответить
    Ответить
  • Коментарий от: foodbest

    Дата: 29.01.2015, 15:06:02
  • Большое спасибо за материал. Быстро адаптировал ваш код под свои нужды, всем ещё раз напоминаю, код должен заканчиваться физическим созданием div с id='mytimer'!!!
    Ответить
  • Коментарий от: Нафис

    Дата: 13.11.2014, 10:59:06
  • как переписать скрипт , чтобы после обновления не начиналасьзаново считать
      Коментарий от: Анатолий

      Дата: 20.01.2015, 13:24:24
    • Запиши переменную в куки "После того как таймер закончил добавляем в куки переменную, и в начале скрипта поставить проверку, если есть переменная то таймер не будет выполнять вычисление"
      Ответить
    Ответить
  • Коментарий от: нафис

    Дата: 13.11.2014, 10:40:25
  • почему кргда я добовляю дату счетчик исчезает со страницы
    Ответить
  • Коментарий от: Алексей

    Дата: 05.11.2014, 17:20:43
  • Ругается на месяц, когда его устанавливаешь в запросе countDown(30,30,30,30,30);
      admin
      Коментарий от: admin

      Дата: 05.11.2014, 17:54:10
    • там ошибка была, я поправил, а вобще таймер отсчитывает до конктретной даты например: countDown(0,18,30,31,11,2014); будет отсчитывать до 18:30 31 ноября 2014 года
        Коментарий от: Кирилл

        Дата: 22.10.2015, 20:58:07
      • Разработчик, аууу! Как была ошибка с месяцем, так и осталась! За 2 года так нифига и не исправил. Проснись!!!!!!!!!!!!!!!!!!!
        Ответить
      • Коментарий от: Кирилл

        Дата: 22.10.2015, 20:47:48
      • countDown(30,02,03,11,10,2016); - скрипт не работает, консоль ругается - не определен месяц !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        Ответить
      • Коментарий от: Кирилл

        Дата: 22.10.2015, 20:37:35
      • Вы написали: "..countDown(0,18,30,31,11,2014); будет отсчитывать до 18:30 31 ноября 2014 года."  НЕТ, судя по этой строке:
        "function countDown(second,endMinute,endHour,endDay,endMonth,endYear)"
        отсчет будет до 30 часов 18 минут, а не наоборот!
        .. И почему не пашет таймер, когда я ввел такие параметры времени: countDown(30,02,03,11,10,2016);
        ???
        Ответить
      Ответить
    Ответить
  • Коментарий от: 100btc.ru

    Дата: 23.09.2014, 22:17:50
  • прив, подскажи пожалуйста как сделать таймеры для каждой кнопки, есть ряд кнопок на странице, при нажатии на кнопку нужно возле нее показать таймер отсчета определенного времени для каждой кнопки при нажатии, время разное для кнопок
    Ответить
  • Коментарий от: Артем

    Дата: 09.08.2014, 15:49:49
  • А можно как то сделать чтобы выводилось 01,02,03 ... 09, т.е. ноль и цифра, когда меньше 10?
    Ответить
  • admin
    Коментарий от: admin

    Дата: 01.08.2014, 1:44:17
  • Прошу прощения, забыл написать о том что в коде html должен быть блок : <div id="mytimer"></div> Можете обозвать его как пожелаете для этого вам надо прописать его в коде: document.getElementById('yourtimer').innerHTML = ...
    Ответить
  • Коментарий от: Valter

    Дата: 01.08.2014, 0:11:06
  • Помогите разобраться. Как пользоваться кодом?
    Пробовал
    <script type="text/javascript" src="путь до скрипта"></script>
    и
    <script type="text/javascript">
    <!-- тело скрипта-->
    </script>

    как запускать-то? у меня так не заработал (
      admin
      Коментарий от: admin

      Дата: 01.08.2014, 0:26:26
    • Странно что не работает он у меня прописан в html коде и запускается прямо в вашем браузере , если обратите внимание. Посмотрите в консоле на что ругается скрипт
      Ответить
    Ответить
  • Коментарий от: Алексей

    Дата: 29.07.2014, 6:55:08
  • Скопировал код, вставил в дримвивер между тегами скрипт и нечего не работает, вообще не чего не выводится.
      admin
      Коментарий от: admin

      Дата: 01.08.2014, 0:29:07
    • Честно говоря не пробовал в дримвьюэре запускать. Может ему чего -то не хватает. Шрифт использовал специфичный можете как нибудь другой попробовать
      Ответить
    Ответить
  • Коментарий от: Ирина

    Дата: 29.07.2014, 1:18:10
  • Огромное спасибо. Материал оказался очень полезным
    Ответить
Добавить комментарий