javascript特效实现--当前时间和倒计时效果的简洁实例_

1、javascript特效实现-当前时间和倒计时效果的简洁实例_ 这个效果的实现关键是对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); showt

2、ime1(); 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=星期日,星期

3、一,星期二,星期三,星期四,星期五,星期六, h=nowdate.getHours(), m=nowdate.getMinutes(), s=nowdate.getSeconds(), h=checkTime(h),/函数checkTime用于格式化时，分，秒 m=checkTime(m), s=checkTime(s); p1.innerHTML=year+年+month+月+date+日+weekday+h+：+m+：+s; setTimeout(showtime1, 1000);/反复执行函数本身 其中的checkTime函数如下： function checkTime(i) if (i

4、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 sho

5、wTime2() var nowtime=new Date(),/猎取当前时间 endtime=new Date(2021/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(le

6、fttime/1000%60);/计算秒数 p2.innerHTML=leftd+天+lefth+:+leftm+:+lefts; setTimeout(showTime2, 1000); 其中比较重要的几点： 定义结束的时间endtime=new Date(2021/6/6)是通过new一个带有参数的Date对象，挺直 new Date()则是挺直猎取到当前的时间； getTime()方法得到的是距离1970 年 1 月 1 日的毫秒数。 天数，小时数，分钟数和秒数的计算，%（取模运算）。得到距离结束时间的毫秒数（剩余毫秒数），除以1000得到剩余秒数，再除以60得到剩余分钟数，再除以60得

7、到剩余小时数。除以24得到剩余天数。剩余秒数 lefttime/1000 模60得到秒数，剩余分钟数 lefttime/(1000*60) 模60得到分钟数，剩余小时数模 lefttime/(1000*60*60) 模24得到小时数。 3.限时抢购倒计时效果 function showtime3() var nowtime=new Date(), endtime=new Date(2021/1/1,00:00:00),/设置结束时间 lefttime=parseInt(endtime.getTime()-nowtime.getTime()/1000), d=Math.floor(lefttim

8、e/(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(2021/1/1,00:00:00) 下面是完整的代码 !DOCTYPE html html lang=en head meta charset=UTF-8 title倒计时效果/title scrip

9、t type=text/javascript function checkTime(i) if (i10) 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.ge

10、tMonth()+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+日+weekday+h+：+m+：+s; setTimeout(showtime

11、1, 1000); function showtime2() var nowtime=new Date(), endtime=new Date(2021/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.

12、innerHTML=leftd+天+lefth+:+leftm+:+lefts; setTimeout(showtime2, 1000); function showtime3() var nowtime=new Date(), endtime=new Date(2021/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.inne