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

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

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

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

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

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

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

2016-02-02_132743

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

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

HTML

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

CSS


.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;
}

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

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

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


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);
	}
}

или


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);
		}
	}
	
	
});

Другие статьи

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

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

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

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

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

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

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

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

Указать точное время звонка

или позвоните мне по телефону
+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"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

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

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