Таймер обратного отсчета на странице. Часть 1 из 3
Различные акции для стимулирования посетителей веб проекта к каким-либо действиям очень популярны. Ограничения по времени великолепно действуют на людей, помогая им быстро и уверенно принимать решения. Очень полезным инструментом при организации акций является таймер обратного отсчета. Большие цифры, которые показывают неумолимо ускользающее время, являются отличным стимулятором. А по завершении отсчета таймер сам уберет ссылку, ведущую на страницу с отличным предложением.
В данном уроке мы сделаем страницу с таймером обратного отсчета на основе плагина jQuery CountDown. В состав исходников включены два примера HTML страниц со счетчиком обратного отсчета (в темном и светлом варианте), а также PHP заготовка для них.
Чтобы на странице установить счетчик необходимо создать следующую разметку HTML:
<!-- Начало панели счетчика --> <div id="countdown_dashboard"> <div class="dash weeks_dash"> <span class="dash_title">недель</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash days_dash"> <span class="dash_title">дней</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash hours_dash"> <span class="dash_title">часов</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash minutes_dash"> <span class="dash_title">минут</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash seconds_dash"> <span class="dash_title">секунд</span> <div class="digit">0</div> <div class="digit">0</div> </div> </div> <!-- Завершение панели счетчика -->
Для каждой части счетчика задается набор из трех элементов в контейнере div
: название и две цифры. А все части располагаются в общем контейнере.
Для элементов счетчика надо задать стили. Ниже приводится пример для темного варианта оформления (стили для светлого варианта вы можете посмотреть в исходниках):
#countdown_dashboard { height: 96px; margin-left: 125px; } .dash { width: 138px; height: 96px; background: transparent url('../images/dash.png') 0 0 no-repeat; float: left; margin-left: 2px; padding-left: 13px; position: relative; color: #333; } .weeks_dash { background: transparent url('../images/dark_weeks_dash.png') 0 0 no-repeat; } .days_dash { background: transparent url('../images/dark_days_dash.png') 0 0 no-repeat; } .hours_dash { clear: left; background: transparent url('../images/dark_hours_dash.png') 0 0 no-repeat; } .minutes_dash { background: transparent url('../images/dark_minutes_dash.png') 0 0 no-repeat; } .seconds_dash { background: transparent url('../images/dark_seconds_dash.png') 0 0 no-repeat; } .dash .digit { font: bold 52pt Verdana; font-weight: bold; float: left; width: 59px; text-align: center; position: relative; } .dash_title { display: none; }
Для каждой части счетчика задается свой собственный фон в соответствии с задумкой оформления.
Теперь страница готова для подключения механизма счетчика. Подключаем необходимые файлы библиотеки jQuery и плагина:
<script language="Javascript" type="text/javascript" src="/js/jquery-1.4.1.js"></script> <script language="Javascript" type="text/javascript" src="/js/jquery.lwtCountdown-0.9.5.js"></script>
Установить таймер можно двумя вариантами: смещением от текущего значения времени
// Инициализация таймера установкой смещения от текущего значения jQuery(document).ready(function() { $('#countdown_dashboard').setCountDown({ targetOffset: { 'day': 1, //дней 'month': 1, //месяцев 'year': 0, //лет 'hour': 1, //часов 'min': 1, //минут 'sec': 1 //секунд } }); });
или заданием абсолютного значения времени
// Инициализация таймера установкой абсолютного значения времени jQuery(document).ready(function() { $('#countdown_dashboard').setCountDown({ targetDate: { 'day': 15, //число 'month': 1, //месяц 'year': 2011, //год 'hour': 12, //час 'min': 0, //минуты 'sec': 0 //секунды } }); });
После инициализации таймера он начинает обратный отсчет. По достижении нулевого значения счетчик прекращает счет и генерирует событие onComplete для которого можно определить функцию, выполняющую необходимые действия.
// Устанавливаем счетчик на 5 секунд jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetOffset: { 'day': 0, 'month': 0, 'year': 0, 'hour': 0, 'min': 0, 'sec': 5 }, // По завершении счета будет выскальзывать панель #complete_info_message onComplete: function() { $('#complete_info_message').slideDown() } }); });
Можно исключить вывод количества недель, если значение счетчика не настолько большое:
// Устанавливаем счетчик jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetOffset: { 'day': 0, 'month': 0, 'year': 1, 'hour': 0, 'min': 0, 'sec': 3 }, omitWeeks: true // Отключаем вывод количества недель }); });
Счет можно остановить, продолжить, а также сбросить к нужному значению:
// Устанваливаем счетчик jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetOffset: { 'day': 1, 'month': 1, 'year': 0, 'hour': 1, 'min': 1, 'sec': 1 } }); }); // Останавливаем счет function stop() { $('#countdown_dashboard').stopCountDown(); } // Запускаем счет function start() { $('#countdown_dashboard').startCountDown(); } // Сброс счетчика function reset() { $('#countdown_dashboard').stopCountDown(); $('#countdown_dashboard').setCountDown({ targetOffset: { 'day': 1, 'month': 1, 'year': 0, 'hour': 1, 'min': 1, 'sec': 1 } }); $('#countdown_dashboard').startCountDown(); }
На одной странице можно запустить несколько счетчиков:
jQuery(document).ready(function() { // Устанавливаем первый счетчик $('#countdown_dashboard').countDown({ targetOffset: { 'day': 1, 'month': 1, 'year': 0, 'hour': 1, 'min': 1, 'sec': 5 } }); // Устанавливаем второй счетчик $('#countdown_dashboard2').countDown({ targetOffset: { 'day': 10, 'month': 1, 'year': 0, 'hour': 6, 'min': 34, 'sec': 10 } }); });
В счетчиках также можно использовать время UTC (универсальное координированное время), указав явно специальную опцию:
// Инициализация счетчика jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetDate: { 'day': 17, 'month': 12, 'year': 2010, 'hour': 01, 'min': 0, 'sec': 0, // Используем время UTC 'utc': true } }); });
В функции-обработчике события onComplete определяются все действия, которые надо сделать при завершении отсчета. Например, удаляются элементы счетчика и ссылка на страницу с предложениями из структуры документа, а вместо них выводится надпись о завершении акции.
В следующих уроках мы представим бесплатные плагины для WordPress и Joomla для организации таймеров обратного счета. Использование CMS и плагинов дает возможность организоваывть такие акции даже тем, кто очень слаб в применении JavaScript, HTML и CSS.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/y15rbLQJOLA/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.