Лічильник зворотного відліку на javaScript
Інтернет-магазини часто проводять акції, які полягають в тому, що на якийсь товар діє знижка протягом певного часу. Зазвичай, на сторінках з детальним описом цього товару, а також на сторінці категорії, до якої цей товар відноситься, розміщується лічильник, що відлічує час, що залишився до закінчення акції час.
Також такі лічильники використовуються на сторінках-заглушках при створенні нової версії сайту - вони відраховують час до моменту відкриття оновленого сайту.
Зараз я розгляну приклад такого лічильника, написаного на JavaScript. Крім того, в інтернеті можна знайти вже готові jQuery countdown лічильники. Пару з них я також згадаю в цій статті.
Отже, приступимо.
Спочатку створюємо html-елемент, в якому буде виводитися лічильник. Наприклад, такий.
HTML
<Body> ... <div id = "event-mess"> <span id = "timetoevent"> </ span> </ div> ... </ body>Тепер можна приступати до програмування. Код вийде не дуже складний - буде складатися з однієї функції. Як аргумент вона буде приймати дату майбутньої події у вигляді об'єкта Date () і повертати кількість днів, годин, хвилин і секунд до цієї дати як результат своєї роботи.
JavaScript
// Функція обчислює час до події function timeToEvent (eventDate) {var now = new Date (); var output = ''; // кількість днів до події var daystoED = Math.floor (Math.round (eventDate-now) / 86400000); daystoED = (daystoED <1)? "0" + daystoED: daystoED; // кількість годин до події var hourstoED = 24 - now.getHours () - 1; hourstoED = (hourstoED <10)? "0" + hourstoED: hourstoED; // кількість хвилин до події var minutestoED = 60 - now.getMinutes () - 1; minutestoED = (minutestoED <10)? "0" + minutestoED: minutestoED; // кількість секунд до події var secondstoED = 60 - now.getSeconds () - 1; secondstoED = (secondstoED <10)? "0" + secondstoED: secondstoED; // повідомлення output = daystoED + "дн." + HourstoED + "годину." + MinutestoED + "хв." + SecondstoED + "сек."; return output; }Потім, після завантаження сторінки будуть визначатися параметри, з якими буде працювати функція, а саме дата події, яка буде передаватися в функцію, а також повідомлення і елементи сторінки, куди буде виводитися повідомлення і результат роботи функції.
Також в коді буде поставлено умову: у разі якщо поточна дата більше переданої дати події, тобто подія вже наступило, функція викликатися не буде.
HTML
<Head> ... <script type = "text / javascript"> window.onload = function () {// поточна дата var now = new Date (); // дата майбутньої події (рік, місяць, число) var eventDate = new Date (2013,7,31); var span = document.getElementById ( 'timetoevent'); var text = "До закінчення розпродажу залишилося"; var div = document.getElementById ( 'event-mess'); // якщо подія ще не настав if (now <eventDate) {div.firstChild.nodeValue = text; window.setInterval (function () {span.innerHTML = timeToEvent (eventDate);} 1000); }} </ Script> ... </ head>Як я і обіцяв, код вийшов зовсім нескладний. Проте, потрібно звернути увагою на те, що дата передається в форматі об'єкта Date (), а саме, номер місяця відраховується з нуля (Січень) до 11 (Грудень). Те ж саме стосується годин (0-23), хвилин (0-59) і секунд (0-59), якщо час події також потрібно вказати.
В мережі я знайшов пару готових jQuery countdown лічильників. В процесі пошуку мені часто траплялися платні лічильники, але якщо пошукати довше, то можна знайти і безкоштовні. Наприклад, ось ці:
- jquery-counter - безкоштовний jQuery countdown лічильник, розроблений на JavaScript і CSS3. Може вести звичайний і зворотний відлік часу. Параметри можуть передаватися у вигляді атрибутів елемента, в якому розміщуватиметься лічильник (наприклад, <span>) або при ініціалізації лічильника у вигляді об'єкта JavaScript.
- flipCounter 1.2 - теж безкоштовний лічильник, гнучко настроюється і зручний в застосуванні. На сторінці проекту дані докладні інструкції по його використанню.
Вибір, що саме використовувати залишається за розробником: готові лічильники на jQuery або лічильник з цієї статті. Можливо, ви взагалі захочете написати якийсь свій варіант лічильника або поліпшити наведений вище код.
Завантажити код лічильника зі статті
Floor (Math.round (eventDate-now) / 86400000); daystoED = (daystoED <1)?GetHours () - 1; hourstoED = (hourstoED <10)?
GetMinutes () - 1; minutestoED = (minutestoED <10)?
GetSeconds () - 1; secondstoED = (secondstoED <10)?
