Таймер обратного отсчета на странице. Часть 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-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Жизнь подобна универмагу: в ней находишь всё, кроме того, что ищешь Кроткий Эмиль - (1892—1963) - русский поэт–сатирик, юморист и афорист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.