在网页中如何实现倒计时的效果?
作者:闪吧 类型:原创 来源:闪吧
在网页中如何实现倒计时的效果?
解决思路: 这个效果通常用在计算当前日期到某个特写日子的时间倒计。实现的思路是先用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日
- 最近更新
