在网页中如何实现倒计时的效果?

作者:闪吧   类型:原创   来源:闪吧

  在网页中如何实现倒计时的效果?
解决思路
这个效果通常用在计算当前日期到某个特写日子的时间倒计。实现的思路是先用getTime 方法分别取得两个日期与1970年1月1日的相关毫秒数,得到两个日期间相差的毫秒数,然后除以 86400000 (1000*60*60*24) 即得到相差的天数,小时、分、秒和十分一毫秒就从当前时间上倒扣。
具体步骤

代码示例:

<script defer>
//对数字类型对象的方法扩展,当数字小于两位时在前面补0,使之保持两位
Number.prototype.add0=function(){return "00".substr(this.toString().length)+this.toString()}    
//对数组类型对象的方法扩展,类似数组的 join 方法
Array.prototype.Join=function(){for(i=0;i<this.length;i++)this[i]=this[i].add0();return this.join(":")} 
function count(){
 with(new Date()){
    hour =getHours()           //取得 Date 对象中用本地时间表示的小时值
    minute =getMinutes() //取得 Date 对象中用本地时间表示的分钟值
    second = getSeconds()    //取得 Date 对象中用本地时间表示的秒钟值
//取得 Date 对象中用本地时间表示的毫秒值的十分之一并取整
    milli = getMilliseconds()/10|0
    datetext.innerText = getFullYear()+"年"+(getMonth()+1)+"月"+getDate()+"日星期"+"日一二三四五六".charAt(getDay()) //输出当前日期
    //输出当前时间
    timetext.innerText = [hour,minute,second,milli].Join()
    var days=Math.floor((new Date(2004,0,1).getTime()-getTime())/86400000)//计算相差的天数
    dayleft.innerText="距元旦"+(days<0?"过了":"还有")+Math.abs(days)+"天"               //输出相差的天数,判断预定日期是否已过
    timeleft.innerText=[(23-hour),(59-minute),(59-second),(99-milli)].Join()            //输出时、分、秒和十分之一毫秒的倒计数字
 }
}
setInterval("count()",10)      //每10毫秒执行一次 count 函数
</script>
<center>
<div id="datetext"></div>
<div id="timetext"></div>
<div id="dayleft"></div>
<div id="timeleft"></div>
</center>

注意:时、分、秒和十分之一毫秒的合计数字分别用23、59、59和99相减。
特别提示
代码中的<center> 到 </center>部分内容的位置决定最后倒计时效果显示的位置。代码运行效果如图 3.17所示。

图 3.17 距2004年元旦的倒计时

特别说明


本例先通过用Date 对象的 getTime方法获取两个日期间相关的毫秒数,然后转成天数,再分别计算时、分、秒和毫秒的倒计值,在输出前用到了数字和数组的扩展方法。
1.              getTime 返回 Date 对象中的时间值,这个整数代表了从 1970 年 1 月 1 日开始计算到 Date 对象中的时间之间的毫秒数。
2.              getMilliseconds 返回 Date 对象中用本地时间表示的毫秒值。
3.              floor 返回小于等于其数值参数的最大整数。
4.              prototype 返回对象类型原型的引用。用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
   责任编辑:kissall    时间:2005年8月29日