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

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

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

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

});