Bộ đếm thời gian giảm dần

Với bộ định thời gian đơn giản này, bạn sẽ dễ dàng thông báo cho khách truy cập biết trang web sẽ chuyển tới. Đoạn mã khá ngắn gọn và rất dễ để chỉnh sửa phù hợp nhu cầu, vì vậy đoạn mã chỉ thuần JavaScript và bạn phải sử dụng CSS để trang trí thêm nếu muốn có một hiệu ứng bắt mắt hơn.

CSS:

<style type="text/css">

html {

 background:#222;

 height:100%;

}

body {

 font:normal 76% verdana,tahoma,arial;color:#fff;

}

a {

 color:#99ffff;

}

a:hover {

 color:#ffff00;

}

h1, h2 {

 font:normal 1em georgia,helvetica,arial;

 letter-spacing:-0.5px; /* it isn't web 2.0 otherwise, right? ;) */

}

p {

 margin:0.5em 0px 1.25em 0px;

 padding:0px;

 line-height:1.7em;

}

/*COUNTER SPECIFIC STYLES */

.counter{

width: 610px;

}

.counter ul.countdown{

list-style-type: none;

color: white;

font-weight: bold;

text-align: center;

}

.counter ul.countdown li{

float: left;

background: url(digit.png) no-repeat;

height:110px;

width: 105px;

padding-top: 15px;

}

.counter ul.countdown li div{

font-size: 15px;

}

.counter ul.countdown li div.countdown_num{

font-size: 48px;

}

.counter ul.countdown li.no_countdown{

padding-top:4px;

background:transparent;

height:110px;

width:180px;

}

</style>

HTML:

<div id="counter" class="counter">
<ul class="countdown">
<li><div class="countdown_num" id="countdown_day"></div><div>Days</div></li>
<li><div class="countdown_num" id="countdown_hour"></div><div>Hours</div></li>
<li><div class="countdown_num" id="countdown_min"></div><div>Minutes</div></li>
<li><div class="countdown_num" id="countdown_sec"></div><div>Seconds</div></li>
</ul>
</div>
<div id="expired" style="display:none;">
The deadline has passed.
</div>
<script type="text/javascript">
/*
Countdown Timer
Based on the "Count down until any date script" - By JavaScript Kit (www.javascriptkit.com)
Author: (c) 2009 Elbert Bautista
URL: http://www.egTheBlog.com
Licence : Open Source MIT Licence


*/

var current="Expired"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")


function countdown(yr,m,d){
theyear=yr;themonth=m;theday=d
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[m-1]+" "+d+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday==0&&dhour==0&&dmin==0&&dsec==1){
document.getElementById('counter').style.display='none';
document.getElementById('expired').style.display='block';
return
}
else{
document.getElementById('countdown_day').innerHTML=dday;
document.getElementById('countdown_hour').innerHTML=dhour;
document.getElementById('countdown_min').innerHTML=dmin;
document.getElementById('countdown_sec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday)",1000)
}
}


var deadline=new Date();
deadline.setDate(deadline.getDate()+5);
var deadlineYear = deadline.getYear();
if (deadlineYear < 1000)
deadlineYear+=1900
//enter the count down date using the format year/month/day
countdown(deadlineYear, deadline.getMonth()+1, deadline.getDate());
</script>