这个效果的实现关键是对Date对象和setTimeout的使用。
一共有三个例子,HTML结构如下,就不添加CSS样式了。
<body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body>
主要体会javascript的实现
window.onload=function () { var p1=document.getElementById("p1"), p2=document.getElementById("p2"); p3=document.getElementById("p3"); showtime1(); showtime2(); showtime3(); }
1.简单的实现当前时间的显示
function showtime1() { var nowdate=new Date();//创建Date对象nowdate,以获取当前时间 var year=nowdate.getFullYear(),//获取年份 month=nowdate.getMonth()+1,//获取月份,getMonth()得到的是0-11,需要加1 date=nowdate.getDate(),//获取日份 day=nowdate.getDay(),//获取一周中的某一天,getDay()得到的是0-6 week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"], h=nowdate.getHours(), m=nowdate.getMinutes(), s=nowdate.getSeconds(), h=checkTime(h),//函数checkTime用于格式化时,分,秒 m=checkTime(m), s=checkTime(s); p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+":"+m+":"+s; setTimeout(showtime1, 1000);//反复执行函数本身 }
其中的checkTime函数如下:
function checkTime(i) { if (i<10) { i="0"+i; } return i; }
因为平时看到的时间格式一般是00:00:01,而getHours,getMinutes,getSeconds得到格式是0到9,不是00到09这样的格式。所以在从9变成10的过程中,有一位数,变成两位数,同样在充59秒变为0秒或者59分变为0分或者23时变为0时。
比如 23:59:59 再下一秒 应该变为00:00:00;若未使用checkTime函数进行处理,则会变为0:0:0,这样格式上就有点不统一,而且视觉上也有字数增加或减少的突变。(后面两个例子就不用checkTime函数对时分秒进行处理了!!!)
2.高考倒计时效果实现
function showTime2() { var nowtime=new Date(),//获取当前时间 endtime=new Date("2017/6/6");//定义结束时间 var lefttime=endtime.getTime()-nowtime.getTime(),//距离结束时间的毫秒数 leftd=Math.floor(lefttime/(1000*60*60*24)),//计算天数 lefth=Math.floor(lefttime/(1000*60*60)%24),//计算小时数 leftm=Math.floor(lefttime/(1000*60)%60),//计算分钟数 lefts=Math.floor(lefttime/1000%60);//计算秒数 p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts; setTimeout(showTime2, 1000); }
其中比较重要的几点:
① 定义结束的时间endtime=new Date("2017/6/6")是通过new一个带有参数的Date对象,直接 new Date()则是直接获取到当前的时间;
② getTime()方法得到的是距离1970 年 1 月 1 日的毫秒数。
③天数,小时数,分钟数和秒数的计算,%(取模运算)。得到距离结束时间的毫秒数(剩余毫秒数),除以1000得到剩余秒数,再除以60得到剩余分钟数,再除以60得到剩余小时数。除以24得到剩余天数。剩余秒数 lefttime/1000 模60得到秒数,剩余分钟数 lefttime/(1000*60) 模60得到分钟数,剩余小时数模 lefttime/(1000*60*60) 模24得到小时数。
3.限时抢购倒计时效果
function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"),//设置结束时间 lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m=Math.floor(lefttime/60%60), s=Math.floor(lefttime%60); p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒"; setTimeout(showtime3, 1000); }
其实和第二个例子大同小异,区别是结束时间的设置 new Date("2020/1/1,00:00:00")
下面是完整的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时效果</title> <script type="text/javascript"> function checkTime(i) { if (i<10) { i="0"+i; } return i; } window.onload=function () { var p1=document.getElementById("p1"), p2=document.getElementById("p2"); showtime1(); showtime2(); showtime3();
} function showtime1() { var nowdate=new Date(); var year=nowdate.getFullYear(),//年份 month=nowdate.getMonth()+1,//月份 date=nowdate.getDate(),//日 week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"], day=nowdate.getDay(),//getDay获取0-6 h=nowdate.getHours(), h=checkTime(h), m=nowdate.getMinutes(), m=checkTime(m), s=nowdate.getSeconds(), s=checkTime(s); p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+":"+m+":"+s; setTimeout(showtime1, 1000); } function showtime2() { var nowtime=new Date(), endtime=new Date("2017/6/6"); var lefttime=endtime.getTime()-nowtime.getTime(), leftd=Math.floor(lefttime/(1000*60*60*24)), lefth=Math.floor(lefttime/(1000*60*60)%24), leftm=Math.floor(lefttime/(1000*60)%60), lefts=Math.floor(lefttime/1000%60); p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts; setTimeout(showtime2, 1000); } function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"), lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m=Math.floor(lefttime/60%60), s=Math.floor(lefttime%60); p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒"; setTimeout(showtime3, 1000); } </script> </head> <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> </html>