+7-499-703-00-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Спасибо за оставленную заявку
Ожидайте звонка
Время чтения: 5 мин. 23 февраля 2017 в 12:51 Javascript,Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Таймер обратного отсчета на сайт

2016-02-02_132743

Таймер обратного отсчета на сайт подталкивает пользователя к покупке СЕЙЧАС. Полезная вещь.

Реализуется следующим путем:

HTML

[php]
<div class="timer_block">
<div class="timer_desc">До конца акции осталось: <SCRIPT language=JavaScript>
<!—
var CurrentDate = new Date();
var MonthName = new Array(’01’,’02’,’03’,’04’,’05’,’06’,’07’,’08’,’09’,’10’,’11’,’12’);
document.write(» + CurrentDate.getDate() + ‘.’ + MonthName[CurrentDate.getMonth()] + ‘.’ + (CurrentDate.getYear() < 200 ? CurrentDate.getYear() + 1900 : CurrentDate.getYear()) + »);
//—>
</SCRIPT>! Осталось: </div>
<div class="timer">
<div class="day_block">
<div class="day">03</div>
<div class="desc">дней</div>
</div>
<div class="hour_block">
<div class="hour">01</div>
<div class="desc">часов</div>
</div>
<div class="min_block">
<div class="min">08</div>
<div class="desc">минут</div>
</div>
<div class="sec_block">
<div class="sec">18</div>
<div class="desc">секунд</div>
</div>
</div>
</div>
[/php]

CSS

[php]

.timer_block {
padding: 15px 15px;
background: #fff;
}

.timer_h1 {
line-height: 5px;
text-align: center;
font-size: 42px;
font-family: ‘pt_bold’;
text-transform: uppercase;
padding-top: 32px;
margin-bottom: 25px;
color: #000;
}

.timer_h2 {
font-size: 26px;
font-family: ‘sans_light’;
color: #000;
text-align: center;
margin-bottom: 20px;
}

.timer_desc {
font-size: 20px;
text-align: center;
color: #DF1515;
line-height: 19px;
margin-bottom: 20px;
}

.timer {
text-align: center;
}

.timer .day_block, .timer .hour_block, .timer .min_block, .timer .sec_block {
width: 81px;
height: 71px;
background-color: #00D52D;
display: inline-block;
margin-right: 20px;
position: relative;
}

.timer .day_block:before, .timer .hour_block:before, .timer .min_block:before {
top: 40px;
right: -16px;
}

.timer .day_block:after, .timer .hour_block:after, .timer .min_block:after, .timer .day_block:before, .timer .hour_block:before, .timer .min_block:before {
background-color: #6a6a6a;
width: 8px;
height: 8px;
content: »;
position: absolute;
border-radius: 50%;
}

.timer .day, .timer .hour, .timer .min, .timer .sec {
font-size: 46px;
font-family: ‘sans_bold’;
color: #fff;
line-height: 52px;
}

.timer .desc {
font-size: 16px;
color: #fff;
line-height: 19px;
margin-top: -5px;
text-align: center;
}

.timer .day_block:after, .timer .hour_block:after, .timer .min_block:after {
top: 26px;
right: -16px;
}

[/php]

JS таймера с отсчетом до указанного числа

[php]
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
timer();
});

function timer()
{
var now = new Date();
var newDate = new Date("November,14,2015 23:59:59");
var totalRemains = (newDate.getTime()-now.getTime());
if (totalRemains>1)
{
var Days = (parseInt(parseInt(totalRemains/1000)/(24*3600)));
var Hours = (parseInt((parseInt(totalRemains/1000) — Days*24*3600)/3600));
var Min = (parseInt(parseInt((parseInt(totalRemains/1000) — Days*24*3600) — Hours*3600)/60));
var Sec = parseInt((parseInt(totalRemains/1000) — Days*24*3600) — Hours*3600) — Min*60;
if (Days<10){Days="0"+Days}
if (Hours<10){Hours="0"+Hours}
if (Min<10){Min="0"+Min}
if (Sec<10){Sec="0"+Sec}
$(".day").each(function() { $(this).text(Days); });
$(".hour").each(function() { $(this).text(Hours); });
$(".min").each(function() { $(this).text(Min); });
$(".sec").each(function() { $(this).text(Sec); });
setTimeout(timer, 1000);
}
}

</script>
[/php]

JS таймера с отсчетом ежедневно

[php]

function timer()
{
var now = new Date();
var newDate = new Date((now.getMonth()+1)+"/"+now.getDate()+"/"+now.getFullYear()+" 23:59:59"); //var newDate = new Date("Feb,29,2016 23:59:00");
var totalRemains = (newDate.getTime()-now.getTime());
if (totalRemains>1)
{
var Days = (parseInt(parseInt(totalRemains/1000)/(24*3600)));
var Hours = (parseInt((parseInt(totalRemains/1000) — Days*24*3600)/3600));
var Min = (parseInt(parseInt((parseInt(totalRemains/1000) — Days*24*3600) — Hours*3600)/60));
var Sec = parseInt((parseInt(totalRemains/1000) — Days*24*3600) — Hours*3600) — Min*60;
if (Days<10){Days="0"+Days}
if (Hours<10){Hours="0"+Hours}
if (Min<10){Min="0"+Min}
if (Sec<10){Sec="0"+Sec}
$(".day").each(function() { $(this).text(Days); });
$(".hour").each(function() { $(this).text(Hours); });
$(".min").each(function() { $(this).text(Min); });
$(".sec").each(function() { $(this).text(Sec); });
setTimeout(timer, 1000);
}
}
[/php]

или

[php]

jQuery(function($) {
timer();

// var tomorrow = new Date();
// tomorrow.setHours(24,0,0,0);
// $(‘.counter’).countdown({
// until: tomorrow,
// layout: ‘<div class="counter-item"><b>30</b>{dl}</div>’ +
// ‘<div class="counter-item"><b>{hnn}</b>{hl}</div>’ +
// ‘<div class="counter-item"><b>{mnn}</b>{ml}</div>’ +
// ‘<div class="counter-item"><b>{snn}</b>{sl}</div>’
// });
function timer()
{
var now = new Date();
var newDate = new Date((now.getMonth()+1)+"/"+now.getDate()+"/"+now.getFullYear()+" 23:59:59");
var totalRemains = (newDate.getTime()-now.getTime());
if (totalRemains>1)
{
var Days = (parseInt(parseInt(totalRemains/1000)/(24*3600)));
var Hours = (parseInt((parseInt(totalRemains/1000) — Days*24*3600)/3600));
var Min = (parseInt(parseInt((parseInt(totalRemains/1000) — Days*24*3600) — Hours*3600)/60));
var Sec = parseInt((parseInt(totalRemains/1000) — Days*24*3600) — Hours*3600) — Min*60;
if (Days<10){Days="0"+Days}
if (Hours<10){Hours="0"+Hours}
if (Min<10){Min="0"+Min}
if (Sec<10){Sec="0"+Sec}
$(".day").each(function() { $(this).text(Days); });
$(".hour").each(function() { $(this).text(Hours); });
$(".min").each(function() { $(this).text(Min); });
$(".sec").each(function() { $(this).text(Sec); });
setTimeout(timer, 1000);
}
}

});
[/php]

Похожие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка
Заказ тарифа Профессионал
Введите ваше имя и телефон.
Я лично свяжусь с Вами для начала обучения.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка
Заказ тарифа начинающий
Введите ваше имя и телефон.
Я лично свяжусь с Вами для начала обучения.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка
Заказать услугу
В течении 15 минут я рассчитаю точную стоимость и сроки и отпишусь Вам.

Спасибо за оставленную заявку
Ожидайте звонка

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам,
чтобы ответить на ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Начать сотрудничество
Введите ваше имя и телефон.
Я лично перезвоню Вам,
чтобы ответить на ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Обсудить условия
Вкратце опишите Вашу ситуацию. При необходимости прикрепите файл. Я свяжусь с вами в течении 15 минут в рабочее время.

Введите контактный E-mail *

Введите контактный телефон *

Прикрепите файл

Сообщение *

Спасибо за оставленную заявку
Ожидайте звонка
Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *