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

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

Сразу предложу посмотреть, как выглядит и работает наш счетчик: http://vinnichenko.net/portfolio/lp/ (он в самом низу страницы)

В нужном нам месте ставим следующий код:

<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>

<div>Часов</div>

<div>Минут</div>

<div>Секунд</div>

</div>

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» — ее мы подключаем в шапке:

<!DOCTYPE html>

<html>
<head>
    <title>Langing</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/jquery.min.js"></script>
</head>

<!DOCTYPE html>

<html>

<head>

<title>Langing</title>

</head>

В стилевой файл мы вставляем следующие строки:

/* 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 */

/* 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 комментариев

BioCyborg1y 14.03.2014 в 16:07

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

Пн	Вт	Ср	Чт	Пт	Сб	Вс
« Авг
				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

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

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