Счетчик обратного отсчета для лендинга (landing page)

26 комментариев

Недавно делал приземляющую страницу со счетчиком обратного отсчета. Была задача «слизать» скрипт и стили для этого самого счетчика с уже существующей страницы (которая работала на WP). Вот, собственно, хочу поделиться нормальным счетчиком для landing page.countdown

Сразу предложу посмотреть, как выглядит и работает наш счетчик: 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 */

Пользуйтесь! =)

Счетчик обратного отсчета для лендинга (landing page): 26 комментариев

  1. BioCyborg1y

    Добрый день, подскажите как связаться с админом сайта? Писал на емайл не ответили.

    Ответить ↓
  2. Денис

    Подскажите пожалуйста, как этот таймер пропорционально уменьшить в размерах?

    Ответить ↓
    1. admin Автор записи

      Денис, нужно внести соответствующие изменения в CSS, JS и изменить размеры изображения с цифрами.

      Ответить ↓
  3. Юрий

    Добрый день!
    Счетчик запускается, когда клиент первый раз приходит на страницу с счетчиком? То есть для каждого клиента будет свой отсчет времени?
    Спасибо.

    Ответить ↓
    1. admin Автор записи

      Добрый день!
      Именно так. Это ведь JavaScript, который работает на клиентской стороне. Счетчик запускается при каждой загрузке страницы с помощью браузера. Для каждого клиента счетчик будет свой.

      Ответить ↓
  4. Татьяна

    А возможно сделать счетчик повышения цены? Начиная с определенной суммы и в сторону увеличения до копеек. А при нажатии кнопки «Купить» он бы останавливался?

    Ответить ↓
  5. Игорь

    Скрипт отличный все работает.
    Вопрос … нужно выполнение работы нескольких счетчиков.
    Как организовать ?

    Ответить ↓
    1. admin Автор записи

      Я бы пробовал менять в нескольких счетчиках id=»ps_counter». Соответственно, и в скрипте тоже. Переменная cdate тоже может быть разной.

      Ответить ↓
  7. Денис

    В скрипте jquery.countdown.js исправьте ошибку. Строка 48, нужно 9 на 3 поменять. А то выходит в сутках 30 часов.

    Ответить ↓
  8. Данил

    Все работает, все отлично, но при каждом обновлении страницы показания счетчика сбрасываются

    Ответить ↓
    1. admin Автор записи

      Конечно, таков скрипт. При каждой перезагрузке страницы счетчик считает с того числа, которое вы задали в скрипте.

      Ответить ↓
  9. Руслан

    Приветствую. А как сделать, что бы счетчик при обновлении не обновлялся на изначальное время, а продолжал дальше свое время?

    Ответить ↓
  11. Евгений

    Приветствую. Все ок и все просто. Единственное только у меня или у всех не корректно отображаются секунды — налезают на последнее двоеточие или последняя цифра исчезает…

    Ответить ↓
  12. Игорь

    Это фигня, а не счётчик. После любой перезагрузки, он опять начинает считать с прописанного времени. Написано, что есть 2 дня, чтобы заказать со скидкой. Заходит клиент на сайт через 2 дня — а там снова эти же 2 дня. Никакой стимуляции к заказу нет. Он понимает, что его просто дурят!

    Нормальный счётчик, должен определять с какого компьютера заходят, сравнивает заходили с него раньше или нет. Если заходили — продолжает счёт со времени захода. Не заходили — считает с нуля, т.е. с исходной точки.

    Ответить ↓
  13. beklem25

    Хотелось бы что бы счетчик досчитывал до конца,а потом сам обновлялся и начинал сначала. На многих Landing Page сейчас такие используются.

    Ответить ↓
  15. feuer81

    Спасибо. А то когда увидел в задании — немного испугался))) До сих пор не делал.

    Ответить ↓
  16. RAM

    Пробовал, не работает, вывод изображения и надписей есть, цыфир нема.
    Воспользовался бесплатным сервисом megatimer.ru все работает отлично, можно подобрать дизайн, и выставить дату какую надо. Всем рекомендую.

    Ответить ↓

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *