Счетчик времени на JavaScript
Иногда возникает необходимость в установке на сайте счетчика времени в обратном направлении. Например на сайте тур агентства, по продаже горячих путевок, очень полезно выводить такую информацию для потенциальных покупателей. Или же просто поставить на своем блоге счетчик, который будет информировать посетителей о количестве оставшихся дней до нового года. Применений такому скрипту можно найти достаточно много.
Для реализации данной задачи достаточно базовых познаний JavaScript. Но не смотря на это, я не стал писать код с нуля, т.к. в интернете полно исходников для решения поставленной задачи. В результате за основу я взял код найденный мною на одном из форумов программистов. И немного модернизировал его под свои нужды, а именно научил скрипт:
- по окончании обратного отсчета, скрипт вывод вместо таймера сообщение (можно заменить на поздравление)
- реализовал возможность вывода на одной странице нескольких копий счетчика обратного времени с разными исходными данными (полезно для сайта продажи горящих товаров, путевок)
Код на 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 && 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”
Оставить комментарий
Full Stack
Senior, Architect
предложить оффер
- jQuery: как получить значение атрибута?
- PHP работа с изображением, класс SimpleImage
- Интеграция с API ОСАГО сайта sravni.ru
- Комментарии на PHP, Ajax, mySQL
- PHP: Категории бесконечного уровня вложенности.
- Nginx редирект на другой сервис с сохранением URL спросил (а) Сергей
- Исполнитель пропал, почему такое случается и понять с кем работать? спросил (а) Артем
- Можно ли WordPress считать универсальным движком? спросил (а) Андрей
- Что такое самописный скрипт или CMS? спросил (а) Антон
- Как при поиске в linux используя grep, добавить исключения? спросил (а) Алексей
- Консольный скрипт(JavaScript) для автоматических заказов на OZON к записи
- Консольный скрипт(JavaScript) для автоматических заказов на OZON к записи
- Как создать Telegram-бота с авторизацией через сайт к записи
- PHP скрипт: каталог закладок на сайты к записи
- Валидация на PHP к записи
- Сколько зарабатывают в бизнесе на совместных покупках к записи
- Сколько зарабатывают в бизнесе на совместных покупках к записи
Archive
- +2024 (24)
- Ноябрь 2024 (9)
- Октябрь 2024 (8)
- Сентябрь 2024 (1)
- Август 2024 (5)
- Май 2024 (1)
- +2023 (27)
- Ноябрь 2023 (1)
- Октябрь 2023 (13)
- Сентябрь 2023 (10)
- Апрель 2023 (1)
- Март 2023 (1)
- Февраль 2023 (1)
- +2022 (21)
- Декабрь 2022 (11)
- Ноябрь 2022 (1)
- Май 2022 (2)
- Апрель 2022 (2)
- Март 2022 (3)
- Февраль 2022 (1)
- Январь 2022 (1)
- +2021 (17)
- Декабрь 2021 (5)
- Ноябрь 2021 (2)
- Июль 2021 (1)
- Июнь 2021 (2)
- Май 2021 (5)
- Апрель 2021 (1)
- Март 2021 (1)
- +2020 (20)
- Декабрь 2020 (6)
- Сентябрь 2020 (2)
- Август 2020 (1)
- Июль 2020 (2)
- Май 2020 (2)
- Апрель 2020 (2)
- Март 2020 (2)
- Февраль 2020 (1)
- Январь 2020 (2)
- +2019 (18)
- Декабрь 2019 (3)
- Ноябрь 2019 (2)
- Октябрь 2019 (2)
- Сентябрь 2019 (1)
- Август 2019 (2)
- Июль 2019 (1)
- Июнь 2019 (1)
- Апрель 2019 (2)
- Март 2019 (1)
- Февраль 2019 (3)
- +2018 (44)
- Декабрь 2018 (4)
- Ноябрь 2018 (7)
- Октябрь 2018 (8)
- Сентябрь 2018 (1)
- Август 2018 (4)
- Июль 2018 (5)
- Май 2018 (3)
- Апрель 2018 (7)
- Март 2018 (1)
- Февраль 2018 (2)
- Январь 2018 (2)
- +2017 (19)
- Декабрь 2017 (2)
- Ноябрь 2017 (1)
- Октябрь 2017 (1)
- Сентябрь 2017 (2)
- Июль 2017 (1)
- Июнь 2017 (1)
- Май 2017 (2)
- Апрель 2017 (3)
- Март 2017 (2)
- Февраль 2017 (1)
- Январь 2017 (3)
- +2016 (36)
- Декабрь 2016 (3)
- Ноябрь 2016 (3)
- Октябрь 2016 (2)
- Сентябрь 2016 (3)
- Август 2016 (7)
- Июнь 2016 (3)
- Май 2016 (3)
- Апрель 2016 (3)
- Февраль 2016 (1)
- Январь 2016 (8)
- +2015 (36)
- Ноябрь 2015 (5)
- Октябрь 2015 (4)
- Сентябрь 2015 (1)
- Август 2015 (8)
- Июнь 2015 (1)
- Май 2015 (4)
- Апрель 2015 (8)
- Март 2015 (3)
- Февраль 2015 (2)
- +2014 (26)
- Ноябрь 2014 (2)
- Октябрь 2014 (5)
- Сентябрь 2014 (6)
- Июль 2014 (1)
- Июнь 2014 (2)
- Май 2014 (3)
- Апрель 2014 (6)
- Февраль 2014 (1)
- +2013 (27)
- Декабрь 2013 (2)
- Ноябрь 2013 (1)
- Октябрь 2013 (1)
- Август 2013 (1)
- Июль 2013 (3)
- Июнь 2013 (10)
- Май 2013 (1)
- Апрель 2013 (2)
- Февраль 2013 (3)
- Январь 2013 (3)
- +2012 (41)
- Декабрь 2012 (2)
- Ноябрь 2012 (3)
- Октябрь 2012 (7)
- Сентябрь 2012 (2)
- Август 2012 (1)
- Июль 2012 (3)
- Июнь 2012 (2)
- Май 2012 (6)
- Апрель 2012 (2)
- Март 2012 (7)
- Февраль 2012 (5)
- Январь 2012 (1)
- +2011 (57)
- Декабрь 2011 (6)
- Ноябрь 2011 (2)
- Октябрь 2011 (3)
- Сентябрь 2011 (5)
- Август 2011 (4)
- Июль 2011 (3)
- Июнь 2011 (3)
- Май 2011 (3)
- Апрель 2011 (4)
- Март 2011 (10)
- Февраль 2011 (5)
- Январь 2011 (9)
- +2010 (43)
- Декабрь 2010 (7)
- Ноябрь 2010 (21)
- Октябрь 2010 (14)
- Сентябрь 2010 (1)
Свежие записи
- Парсер товаров с Taobao 08.11.2024
- Упаковка и минификация кода JavaScript онлайн 07.11.2024
- Как эффективно анализировать логи при DDOS атаке 07.11.2024
- Бот для автоматических заказов на OZON (плагин для Chrome) 07.11.2024
- Ограничить доступ к серверу только с IP Cloudflare 06.11.2024
Скрипт неверно показывает год и часы. Ввожу дату 2013, 7, 1 (1 июля 2013 года), на что он выдает 59 дней и 13 часов. Часы вообще не убывают… Как исправить?
В конечном итоге получилось, что в сутках 28 часов, а не 24. Помогите исправить.
Какие значения вы присваиваете переменным time_diff[1], time_diff[2] ? Есть вероятность что проблема в часовом поясе. Например если вы присваиваете им значения по средствам PHP, на стороннем хостинге, где часовой пояс выставлен в GTM0, от чего смещение на 4 часа. Это как вариант….
Если вы указываете в переменной, следующие значения:
time_diff[1] = (Date.UTC(2013, 7, 1, 0, 0, 0) — D.getTime()) / 1000; /*первый элемент массива*/
А счетчик выдает количество дней, несоответствующее вашим ожиданиям убедитесь на что время, дата в вашей ОС настроено правильно. Функция D.getTime() возвращает время установленное на вашем компьютере, ОС, в миллисекундах.