1.概述
在浏览一些网站时,网站中经常会根据某一天发生的重要事件给出倒计时天数,比如“距北京奥运会开幕还有30天!“、”距上海世博会开幕还有10天!“等等。
2.技术要点
主要是利用JavaScript中的Date对象来实现。主要就是计算当前系统日期与某一日期之间的天数差,然后根据天数差显示相应的提示信息。计算出的天数差可能为一个浮点值,需要通过Math对象的floor()方法获取整数值,如果天数差为负数,还需要使用Math对象取绝对值的方法abs()。
3.实现过程
(1)新建index.jsp页,编写用于倒计时天数的JavaScript函数。关键代码如下:
/** *事件倒计时 *@title:事件的名称 *@eventDate:事件的日期 */ function countDown(title,eventDate){ var dateObj = new Date(); //当前系统时间的Date对象 var dateStr = eventDate.split("-"); var eventDateObj = new Date(dateStr[0],(dateStr[1]-1),dateStr[2]); var t1 = dateObj.getTime(); //获得Date 对象中的距1970年的时间的毫秒数 var t2 = eventDateObj.getTime(); //获得Date 对象中的距1970年的时间的毫秒数 var datetime=24*60*60*1000; //一天的毫秒值 var days = Math.floor((t2-t1)/datetime)+1; //相差的天数 if(days>0){ document.getElementById("day_str").innerHTML="距"+title+"开幕还有"+days+"天!"; } if(days==0){ document.getElementById("day_str").innerHTML="今天是"+title+"开幕日!"; } if(days<0){ days =Math.abs(days)+1; document.getElementById("day_str").innerHTML="今天是"+title+"第"+days+"个比赛日!"; } //每隔一天的时间调用一次本函数,刷新显示的倒计时提示信息 setTimeout("countDown('2010南非世界杯','2010-6-11')",datetime); }
(2) 通过<body>标签的onload事件加载步骤(1)的JavaScript函数,并且在页面的相应位置加入<div>标签,用于显示倒计时的提示信息,关键代码如下:
<body onLoad="javascript:countDown('2010南非世界杯','2010-6-11')">
<div id="day_str" class="word_Green"></div>
</body>