Доброго времени суток, гики веб-разработки и подписчики моего блога. Сегодня я вместе с вами постараюсь создать в JavaScript отсчет времени назад! Это достаточно популярный прием на различных веб-сайтах с продажей акционной продукции или услуг.
Поэтому я во всех подробностях расскажу, куда такой прием можно внедрить и для чего, какие инструменты скриптового языка для этого используются, а в конце покажу готовый пример кода и прокомментирую важные шаги реализации таймера. Ну что ж, пришло время начать обучение!
Обратный отсчет начался! ...Но зачем?
Чтобы использовать какую-либо технологию или инструмент на своем веб-ресурсе, нужно для начала понимать, а зачем он там вообще нужен и какую роль сыграет в дизайне. Именно поэтому я начал с этой главы.
Представьте, что вы владеете интернет-магазином. Ваш каталог заполнен всевозможными товарами на различные сезоны года. Понятное дело, что сезонные товары набирают спрос у покупателей только перед конкретным сезоном и в самом его начале, а к средине продажи падают.
Так вот, чтобы удержать продукцию «на плаву» и сделать ее конкурентной среди аналогичных товаров, владельцы предлагают своим потребителям скидки и акции. Некоторые их них могут длиться несколько дней.
Поэтому чтобы оповестить потенциального покупателя о скором завершении акционного предложения, возле таких товаров можно повесить таймер с обратным отсчетом времени до окончания срока действия скидок.
Точно такой же прием можно найти и на других сервисах, торгующих купонами, услугами и т.д.
Если отойти от сайтостроения и вспомнить, что еще можно писать на JavaScript, то здесь нельзя пропустить из виду игры. Каждый из вас играл в веб-игры, где уровень заканчивается через определенное количество минут или секунд. Вот там всегда сверху или снизу игрового поля можно отыскать таймер отсчета времени в обратном направлении.
Готовые решения для ленивых
Если вам совершенно не хочется тратить время и писать таймер своими ручками или же вы просто пока еще не умеете программировать на JavaScript, то специально для этого в Интернете в публичном доступе можно отыскать множество плагинов, модулей и программных кодов абсолютно разных таймеров обратного отсчета.
Среди них наиболее популярными считаются Countdown (когда цифры переворачиваются, как листы календаря), Time Circles (показ времени в виде заполняемых цветом колец), FlipClock (несколько похож на первый плагин), 5sec Maintenance Mode (предлагает шесть разнообразных и очень забавных шаблонов с обратным отсчетом времени) и т.д.
Кстати, если вы хотите опробовать что-то из перечисленного списка, то среди моих статей о jQuery найдите публикацию о таймерах обратного отсчета. Там я во всех подробностях описал работу Time Circles и привел пример кода.
Помимо готовых плагинов, существуют и онлайн-генераторы как, например, http://megatimer.ru/. На сайте представлен пример отсчета от серверного времени. Там же вы можете настроить внешний вид, цветовую палитру, время отсчета (от даты или задать определенное количество дней, часов, минут) и тип таймера, а после скачать код.
В качестве примера вставьте в любой редактор кода, например, в http://xhtml.ru/instr/html_editor/ следующую программу и проанализируйте результат.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <style> body { margin: 0; padding:0; text-align: center; color: red; } .main { width: 66%; margin-left: 17%; margin-top: -22px; background: url(https://www.ubackground.com/_ph/21/817519182.jpg) center; } h1 { text-decoration: underline;} img{ width: 560px; margin-top: 15px; border-radius: 14px; box-shadow: 0 0 3px orange, 0 0 7px orange, 0 0 23px orange, 0 0 55px yellow; </style> |
Горячая путевка в Египет
Акция действует
1 |
От теории к практике
Ну, вот мы и разобрали с вами различные способы внедрения счетчика часов на ваш сайт. Однако не обсуждали, как же создать его самим. Поэтому звездный час программирования настал!
Для начала разберем скрипт.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /*Для того, чтобы задать конкретную дату, до которой будет вестись отчет, вам нужно прописать timeend= new Date(ГОД, МЕСЯЦ-1, ДЕНЬ); или же для уточнения всех параметров timeend= new Date(ГОД, МЕСЯЦ-1, ДЕНЬ, ЧАСЫ-1, МИНУТЫ); В моем случае я указал дату 26.12.2016*/ timeend= new Date(2016, 11, 26); /* Так как у нас есть браузеры, которые по разному обрабатывают функцию getYear(), то задать ее можно следующим образом: timeend= new Date(timeend.getYear()>1900?(timeend.getYear()+1):(timeend.getYear()+1901),0,1);*/ //начинаем писать саму функцию обработки function Timer() { today = new Date(); //считываем текущее время today = Math.floor((timeend-today)/1000); tsec=today%60; today=Math.floor(today/60); //делаем проверку на незначащие нули if(tsec<10) tsec='0'+tsec; tmin=today%60; today=Math.floor(today/60); if(tmin<10)tmin='0'+tmin; thour=today%24; today=Math.floor(today/24); /*производим поиск по идентификатору и присваиваем разметке нужную информацию. В данном случае числа.*/ document.getElementById('day').innerHTML=today; document.getElementById('hour').innerHTML=thour; document.getElementById('min').innerHTML=tmin; document.getElementById('sec').innerHTML=tsec; /* setTimeout – это функция задержки выполнения кода. Первый аргумент указывает, что нужно исполнять. А второй – на сколько задерживать (в миллисекундах). В нашем случае на 1 секунду.*/ window.setTimeout("Timer()",1000); } |
Полностью код программы выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <script type="text/javascript"> timeend= new Date(2016, 11, 26); function Timer() { today = new Date(); today = Math.floor((timeend-today)/1000); tsec=today%60; today=Math.floor(today/60); if(tsec<10)tsec='0'+tsec; tmin=today%60; today=Math.floor(today/60); if(tmin<10)tmin='0'+tmin; thour=today%24; today=Math.floor(today/24); document.getElementById('day').innerHTML=today; document.getElementById('hour').innerHTML=thour; document.getElementById('min').innerHTML=tmin; document.getElementById('sec').innerHTML=tsec; window.setTimeout("Timer()",1000); } </script> <style> body { margin: 0; padding:0; text-align: center; color: red; } .main { width: 66%; margin-left: 17%; margin-top: -22px; background: url(https://www.ubackground.com/_ph/21/817519182.jpg) center; } h1 { text-decoration: underline;} img{ width: 560px; margin-top: 15px; border-radius: 14px; box-shadow: 0 0 3px orange, 0 0 7px orange, 0 0 23px orange, 0 0 55px yellow; } .time{ font-size: 22px; text-align: center; text-shadow: 1px 1px 3px #010, 3px 3px 5px #010; } tr { background: rgba(255, 215, 0, .6); } th { font-size: 29px; } </style> |
Горячая путевка в Египет
Акция действует
: | : | : | |
---|---|---|---|
Дней | Часов | Минут | Секунд |
1 |
Если вы почерпнули что-то полезное для себя и вам понравилась данная публикация, то подписывайтесь на обновления блога. Буду благодарен за репосты. До скорой встречи! Пока-пока!
С уважением, Роман Чуешов
Не плохой css. Спасибо. Лишних тегов Mega Timer нагенерировал. Закрывающий script и открывающий body