Недавно делал приземляющую страницу со счетчиком обратного отсчета. Была задача «слизать» скрипт и стили для этого самого счетчика с уже существующей страницы (которая работала на WP). Вот, собственно, хочу поделиться нормальным счетчиком для landing page.
Сразу предложу посмотреть, как выглядит и работает наш счетчик: http://vinnichenko.net/portfolio/lp/ (он в самом низу страницы)
В нужном нам месте ставим следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ps_countdown_wrap"> <div id="ps_counter"></div> <div class="ps_counter_desc"> <div>Дней</div> <div>Часов</div> <div>Минут</div> <div>Секунд</div> </div> <script type="text/javascript" src="js/jquery.countdown.js"></script> <script type="text/javascript"> var cdate = "02:03:32:00"; jQuery(function($){$("#ps_counter").countdown({image: "js/digits.png",startTime: cdate }); }); </script> </div> |
Как видно, нам нужны 2 файла «jquery.countdown.js» и «digits.png«. Обращаем внимание на переменную «cdate» (ee значение равно 02:03:32:00 — это время, с которого начинается обратный отсчет на таймере после загрузки страницы).
Также нам нужна библиотека «jquery.min.js» — ее мы подключаем в шапке:
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <head> <title>Langing</title> <link rel="stylesheet" href="css/styles.css"> <script src="js/jquery.min.js"></script> </head> |
В стилевой файл мы вставляем следующие строки:
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 |
/* counter */ #ps_counter { width: 554px; margin: 0 auto; } .ps_countdown_wrap { width: 580px; margin: 10px auto; border: 1px solid #CCC; background: #fff; color: #000; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 20px 20px 2px; float: none; clear: both; } .cntSeparator { margin: 10px 11px; font: 54px/54px Georgia, "Times New Roman", Times, serif; } .ps_counter_desc { clear: both; margin: 10px auto; width: 554px; overflow: hidden; float: none; } .ps_counter_desc div { float: left; width: 105px; margin: 0 39px 0 0; font: 26px/40px arial; text-align: center; } .ps_counter_desc div:last-child { margin: 0 !important; } /* counter */ |
Пользуйтесь! =)
Добрый день, подскажите как связаться с админом сайта? Писал на емайл не ответили.
Плохо писали, значит. Форма рабочая. Почту проверяю раз 100 за день.
Подскажите пожалуйста, как этот таймер пропорционально уменьшить в размерах?
Денис, нужно внести соответствующие изменения в CSS, JS и изменить размеры изображения с цифрами.
Добрый день!
Счетчик запускается, когда клиент первый раз приходит на страницу с счетчиком? То есть для каждого клиента будет свой отсчет времени?
Спасибо.
Добрый день!
Именно так. Это ведь JavaScript, который работает на клиентской стороне. Счетчик запускается при каждой загрузке страницы с помощью браузера. Для каждого клиента счетчик будет свой.
А возможно сделать счетчик повышения цены? Начиная с определенной суммы и в сторону увеличения до копеек. А при нажатии кнопки «Купить» он бы останавливался?
Татьяна, можно.
Скрипт отличный все работает.
Вопрос … нужно выполнение работы нескольких счетчиков.
Как организовать ?
Я бы пробовал менять в нескольких счетчиках id=»ps_counter». Соответственно, и в скрипте тоже. Переменная cdate тоже может быть разной.
Переименовал
id=”ps_counter” , var cdate .
Все работает. Спасибо за скрипт :)
В скрипте jquery.countdown.js исправьте ошибку. Строка 48, нужно 9 на 3 поменять. А то выходит в сутках 30 часов.
Исправил.
Все работает, все отлично, но при каждом обновлении страницы показания счетчика сбрасываются
Конечно, таков скрипт. При каждой перезагрузке страницы счетчик считает с того числа, которое вы задали в скрипте.
Приветствую. А как сделать, что бы счетчик при обновлении не обновлялся на изначальное время, а продолжал дальше свое время?
…а это уже совсем другой скрипт… =)
А ты знаешь его?
надо спрашивать у Гугла
Приветствую. Все ок и все просто. Единственное только у меня или у всех не корректно отображаются секунды — налезают на последнее двоеточие или последняя цифра исчезает…
Поработайте со стилями =)
Это фигня, а не счётчик. После любой перезагрузки, он опять начинает считать с прописанного времени. Написано, что есть 2 дня, чтобы заказать со скидкой. Заходит клиент на сайт через 2 дня — а там снова эти же 2 дня. Никакой стимуляции к заказу нет. Он понимает, что его просто дурят!
Нормальный счётчик, должен определять с какого компьютера заходят, сравнивает заходили с него раньше или нет. Если заходили — продолжает счёт со времени захода. Не заходили — считает с нуля, т.е. с исходной точки.
Хотелось бы что бы счетчик досчитывал до конца,а потом сам обновлялся и начинал сначала. На многих Landing Page сейчас такие используются.
Поправьте ссылки на скачиваемые файлы.
Спасибо. А то когда увидел в задании — немного испугался))) До сих пор не делал.
Пробовал, не работает, вывод изображения и надписей есть, цыфир нема.
Воспользовался бесплатным сервисом megatimer.ru все работает отлично, можно подобрать дизайн, и выставить дату какую надо. Всем рекомендую.