Счетчик времени на JavaScript

timer Счетчик времени на JavaScriptИногда возникает необходимость в установке на сайте счетчика времени в обратном направлении. Например на сайте тур агентства, по продаже горячих путевок, очень полезно выводить такую информацию для потенциальных покупателей. Или же просто поставить на своем блоге счетчик, который будет информировать посетителей о количестве оставшихся дней до нового года. Применений такому скрипту можно найти достаточно много.

Для реализации данной задачи достаточно базовых познаний JavaScript. Но не смотря на это, я не стал писать код с нуля, т.к. в интернете полно исходников для решения поставленной задачи. В результате за основу я взял код найденный мною на одном из форумов программистов. И немного модернизировал его под свои нужды, а именно научил скрипт:

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

Код на JavaScript:

<script type="text/javascript">
function countDown(num) {
work_number = time_diff[num]--;
if (work_number<0) {document.getElementById('counter'+num).innerHTML = 'отсчет окончен'; } else {
days = Math.floor(work_number / 86400);
work_number -= days * 86400;
hours = Math.floor(work_number / 3600);
work_number -= hours * 3600;
minutes = Math.floor(work_number / 60);
work_number -= minutes * 60;
seconds = Math.floor(work_number % 60);
days = (days < 10) ? "0"+days : days;
hours = (hours < 10) ? "0"+hours : hours;
minutes = (minutes < 10) ? "0"+minutes : minutes;
seconds = (seconds < 10) ? "0"+seconds : seconds;
values = [
declOfNum(days, ["день", "дня", "дней"]),
declOfNum(hours, ["час", "часа", "часов"]),  //
declOfNum(minutes, ["минута", "минуты", "минут"]),  //
declOfNum(seconds, ["секунда", "секунды", "секунд"]) //
];
document.getElementById('counter'+num).innerHTML =  values.join(" ");// + "."; }
}
function declOfNum(number, titles) {
cases = [2, 0, 1, 1, 1, 2];
return "<b>" + number + "</b> " + titles[ (number%100>4 &amp;&amp; number%100<20)? 2 : cases[Math.min(number%10, 5)] ];
}</script>

В тело документа вставляем HTML код и скрипт для запуска таймера:

<div id="counter1"></div>
<div id="counter2"></div>
 
<script type="text/javascript">
var time_diff=new Array;
D = new Date();
time_diff[1] = (Date.UTC(2017, 10, 12, 0, 0, 0) - D.getTime()) / 1000;  /*первый элемент массива*/
time_diff[2] = (Date.UTC(2015, 12, 31, 0, 0, 0) - D.getTime()) / 1000; /*второй элемент массива*/
 
setInterval("countDown(1)", 1000); /*единичка соответствует номеру элемента массива, и номеру ID блока куда будет выводиться счетчик*/
setInterval("countDown(2)", 1000);
</script>

Этот пример выводит два таймера, как вы можете наблюдать в соответствующие блоки с заданным ID — counter1 и counter2. Вызов производиться функцией setInterval(«countDown(2)», 1000); с передающимся параметром единичкой или двойкой, который служит для обозначения блока в который будем выводить.

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

4 комментария to “Счетчик времени на JavaScript”

  • Александр 02.06.2013 в 2:52 пп

    Скрипт неверно показывает год и часы. Ввожу дату 2013, 7, 1 (1 июля 2013 года), на что он выдает 59 дней и 13 часов. Часы вообще не убывают… Как исправить?

    • Александр 02.06.2013 в 8:08 пп

      В конечном итоге получилось, что в сутках 28 часов, а не 24. Помогите исправить.

      • Роман Чернышов 04.06.2013 в 12:28 пп

        Какие значения вы присваиваете переменным time_diff[1], time_diff[2] ? Есть вероятность что проблема в часовом поясе. Например если вы присваиваете им значения по средствам PHP, на стороннем хостинге, где часовой пояс выставлен в GTM0, от чего смещение на 4 часа. Это как вариант….

    • Роман Чернышов 04.06.2013 в 12:35 пп

      Если вы указываете в переменной, следующие значения:
      time_diff[1] = (Date.UTC(2013, 7, 1, 0, 0, 0) — D.getTime()) / 1000; /*первый элемент массива*/
      А счетчик выдает количество дней, несоответствующее вашим ожиданиям убедитесь на что время, дата в вашей ОС настроено правильно. Функция D.getTime() возвращает время установленное на вашем компьютере, ОС, в миллисекундах.

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

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

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...