制作倒计时器为奥运加油
技术与开发
最近老张特别关注北京奥运会，想给自己的网站加个奥运倒计时的功能，在参考了许多网站的奥运倒计时器后，觉得网易的奥运倒计时器很有创意，自己很喜欢，但是自己模仿设计了半天也没有成功。
要制作网易的奥运倒计时器插件（下载地址：http://www.shudoo.com/bzsoft），我们要用到JavaScript语言的日期对象。首先利用日期对象获取当前时间，然后算出该时间与奥运会开幕时间的时间差，再根据时间差设置五色计时条的长度并计算出相差的时间数，最后在一个时间段（如每秒调用一次）重复调用这个过程，我们便可以实现倒计时功能了。利用JavaScript语言的日期对象，我们还可以制作在线时钟、在线日历等。
第一步：制作五色计时色条
新建一个网页，在网页的＜body＞＜/body＞之间添加5个div用来制作五色计时条，在每个div中添加3个li标签，设置li相应背景色，并将用来显示时间差的li的宽度设置为0。关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
＜div class="divtop"＞
距离2008年北京奥运会开幕时间 还有 ＜span class="spantop" id="tian"＞0＜/span＞ 天
＜/div＞
＜div class="divmain"＞
＜li class="w10 hong"＞＜/li＞
＜li class="w300 hong" id="yue_li"＞＜/li＞
＜li class="yue"＞ ＜span id="yue"＞0＜/span＞月＜/li＞
＜/div＞
＜div class="divmain"＞
＜li class="w10 lv"＞＜/li＞
＜li class="w300 lv" id="ri_li"＞＜/li＞
＜li class="ri"＞ ＜span id="ri"＞0＜/span＞日＜/li＞
＜/div＞
＜div class="divmain"＞
＜li class="w10 lan"＞＜/li＞
＜li class="w300 lan" id="shi_li"＞＜/li＞
＜li class="shi"＞ ＜span id="shi"＞0＜/span＞时＜/li＞
＜/div＞
＜div class="divmain"＞
＜li class="w10 huang"＞＜/li＞
＜li class="w300 huang" id="fen_li"＞＜/li＞
＜li class="fen"＞ ＜span id="fen"＞0＜/span＞分＜/li＞
＜/div＞
第二步：设置计时条的长度
有了五色计时条，我们现在要做的就是怎么控制它的长度和显示与奥运会开幕时间相差的时间数。首先我们必须获得一个当前时间和奥运会开幕时间的时间差，然后通过时间差计算出距离奥运会开幕相差的总天数、月数、日数等时间数，最后我们依据相差时间数对五色条的长度进行设置并将相差时间数显示出来。在第一步建立的网页的
之间输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：。var D=parseInt(t/86400000);//剩余总天数
var M=t1.getFullYear()*12+t1.getMonth()-(t2.getFullYear()*12+t2.getMonth())-1;//剩余月数
var c=new Date(t2.getFullYear(),t2.getMonth()+1,01,00,00,00);
var d=parseInt((c.getTime()-theTime)/86400000)+8;//剩余天数
var h=parseInt((t%86400000)/(60*60*1000));//剩余小时数
var m=parseInt(((t%86400000)-(60*60*1000*h))/(60*1000));//剩余分钟数
var s=parseInt(((t%86400000)-(60*60*1000*h)-(60*1000*m))/1000);//剩余秒数
M=(d==0 && h==0 && m==0 && s==0)?M+1:M;//如果天数、小时数、分钟数、秒数都为0，则月数加1
$('tian').innerHTML=D;//将剩余总天数显示在网页上
var v=$('yue_li');
$('yue').innerHTML=M;//将相差月数显示在网页上
v.style.width=(parseInt((300/12)*M))+'px';//设置显示"月数"色条的长度
v=$('ri_li');
$('ri').innerHTML=d;//将相差天数显示在网页上
v.style.width=(parseInt((300/31)*d))+'px'; //设置显示"日数"色条的长度
v=$('shi_li');
$('shi').innerHTML=h;//将相差小时数显示在网页上
v.style.width=(parseInt((300/24)*h))+'px'; //设置显示"小时数"色条的长度
v=$('fen_li');
$('fen').innerHTML=m;//将相差分钟数显示在网页上
v.style.width=(parseInt((300/60)*m))+'px'; //设置显示"分钟数"色条的长度
v=$('miao_li');
$('miao').innerHTML=s;//将相差秒数显示在网页上
v.style.width=(parseInt((300/60)*s))+'px'; //设置显示"秒数"色条的长度
window.setTimeout('olympicTime('+(theTime+1000)+')',1000);//重复调用该函数，以达到倒计时的效果
第三步：启动倒计时器
在完成所有准备工作后我们便可以启动倒计时器了，在第一步的五色条标签下面加入以下JavaScript代码即可：
var t=new Date();//获取客户端当前系统时间
olympicTime(t.getTime());//将当前时间的时间戳传送给倒计时器，启动倒计时器。
编后
本文中的奥运会倒计时器获取的是客户端的系统时间，而客户端的时间存在着不准确性问题，可能会导致倒计时器不准确。读者在制作倒计时器的时候可以通过动态语言获取服务器的当前时间传送给倒计时器，以保证倒计时器的准确性。