Понедельник, 21 Янв 2013 в 12:28

Таймер для лендига

Автор: admin

<style>
@font-face
{
font-family: 'MyriadProRegular';
font-style: normal;
font-weight: normal;
src: url('http://www.timegenerator.ru/c/4/myriadpro-regular-webfont.eot?') format('eot'),
url('http://www.timegenerator.ru/c/4/myriadpro-regular-webfont.woff') format('woff'),
url('http://www.timegenerator.ru/c/4/myriadpro-regular-webfont.ttf') format('truetype'),
url('http://www.timegenerator.ru/c/4/myriadpro-regular-webfont.svg#webfontZPnuZIZf') format('svg');
}
#countbox
{
color: #2f2f2f;
font-family: MyriadProRegular,Helvetica,sans-serif;
font-size: 69px;
height: 106px;
line-height: 82px;
margin: 0 auto;
padding: 0;
width: 436px;
}
#countbox .countbox-num
{
float: left;
}
#countbox .countbox-space
{
float: left;
height: 90px;
width: 8px;
}
#countbox-days1,
#countbox-hours1
,#countbox-mins1,
#countbox-secs1,
#countbox-days2,
#countbox-hours2,
#countbox-mins2,
#countbox-secs2
{
background-image: url('http://www.timegenerator.ru/c/4/flip.png');
background-repeat: no-repeat;
float: left;
height: 89px;
margin: 0 -4px 0 0;
text-align: center;
width: 55px;
z-index: 1;
}
#countbox-days-text,#countbox-hours-text,#countbox-mins-text,#countbox-secs-text
{
background-position: center;
background-repeat: no-repeat;
height: 14px !important;
margin-top: 90px;
position: absolute;
width: 106px;
}
#countbox-days-text
{
background-image: url('http://www.timegenerator.ru/c/4/days_text.gif');
}
#countbox-hours-text
{
background-image: url('http://www.timegenerator.ru/c/4/hours_text.gif');
}
#countbox-mins-text
{
background-image: url('http://www.timegenerator.ru/c/4/mins_text.gif');
}
#countbox-secs-text
{
background-image: url('http://www.timegenerator.ru/c/4/secs_text.gif');
}
#countbox-days1 span, #countbox-days2 span,
#countbox-hours1 span, #countbox-hours2 span,
#countbox-mins1 span, #countbox-mins2 span,
#countbox-secs1 span, #countbox-secs2 span
{
background: url('http://www.timegenerator.ru/c/4/flip_gradient.png');
background-repeat: no-repeat;
display: block;
height: 89px;
position: absolute;
width: 55px;
}
</style>
<script type="text/javascript">
var q = new Date;
var year = q.getFullYear();
var month = q.getMonth();
var day = q.getDate()+1;
var hour = 0;
var minute = 0;
var sec = 0;
delete q;
dateFuture = new Date(2014, 01-1, 31, 23, 59, 59);//new Date(year, month, day, hour, minute, sec); // 31.01.2014 23.55
function CountBox() {
dateNow = new Date;
amount = dateFuture.getTime() - dateNow.getTime();
delete dateNow;
if (amount < 0) {
out = "<div class='countbox-num'><div id='countbox-days1'>
<span></span>0</div><div id='countbox-days2'><span></span>0</div>
<div id='countbox-days-text'></div></div>" +
"<div class='countbox-space'></div>" +
"<div class='countbox-num'><div id='countbox-hours1'>
<span></span>0</div><div id='countbox-hours2'><span></span>0</div>
<div id='countbox-hours-text'></div></div>" +
"<div class='countbox-space'></div>" +
"<div class='countbox-num'><div id='countbox-mins1'><span></span>0</div>
<div id='countbox-mins2'><span></span>0</div>
<div id='countbox-mins-text'></div></div>" +
"<div class='countbox-space'></div>" +
"<div class='countbox-num'><div id='countbox-secs1'>
<span></span>0</div><div id='countbox-secs2'><span></span>0</div>
<div id='countbox-secs-text'></div></div>";
document.getElementById("countbox").innerHTML = out
} else {
days = 0;
days1 = 0;
days2 = 0;
hours = 0;
hours1 = 0;
hours2 = 0;
mins = 0;
mins1 = 0;
mins2 = 0;
secs = 0;
secs1 = 0;
secs2 = 0;
out = "";
amount = Math.floor(amount / 1e3);
days = Math.floor(amount / 86400);
days1 = (days >= 10) ? days.toString().charAt(0) : '0';
days2 = (days >= 10) ? days.toString().charAt(1) : days.toString().charAt(0);
amount = amount % 86400;
hours = Math.floor(amount / 3600);
hours1 = (hours >= 10) ? hours.toString().charAt(0) : '0';
hours2 = (hours >= 10) ? hours.toString().charAt(1) : hours.toString().charAt(0);
amount = amount % 3600;
mins = Math.floor(amount / 60);
mins1 = (mins >= 10) ? mins.toString().charAt(0) : '0';
mins2 = (mins >= 10) ? mins.toString().charAt(1) : mins.toString().charAt(0);
amount = amount % 60;
secs = Math.floor(amount);
secs1 = (secs >= 10) ? secs.toString().charAt(0) : '0';
secs2 = (secs >= 10) ? secs.toString().charAt(1) : secs.toString().charAt(0);
out = "<div class='countbox-num'><div id='countbox-days1'><span>
</span>" + days1 + "</div><div id='countbox-days2'><span></span>" + days2 + "</div>
<div id='countbox-days-text'></div></div>" +
"<div class='countbox-space'></div>" +
"<div class='countbox-num'><div id='countbox-hours1'><span></span>" + hours1 + "</div>
<div id='countbox-hours2'><span></span>" + hours2 + "</div>
<div id='countbox-hours-text'></div></div>" +
"<div class='countbox-space'></div>" +
"<div class='countbox-num'><div id='countbox-mins1'><span></span>" + mins1 + "</div>
<div id='countbox-mins2'><span></span>" + mins2 + "</div>
<div id='countbox-mins-text'></div></div>" +
"<div class='countbox-space'></div>" +
"<div class='countbox-num'><div id='countbox-secs1'><span></span>" + secs1 + "</div>
<div id='countbox-secs2'><span></span>" + secs2 + "</div>
<div id='countbox-secs-text'></div></div>";
document.getElementById("countbox").innerHTML = out;
setTimeout("CountBox()", 1e3)
}
}
window.onload = function () {
CountBox()
}
</script>

 

<div id="Html1" style="position:absolute;left:280px;
top:1343px;width:434px;height:132px;z-index:166">
<div id="countbox"></div>
</div>

Рекомендую ознакомиться с похожими статьями:


Комментарии:

Ваш отзыв

Я в Контакте

Найди меня на Facebook

Добавляйся в Youtube