这个效果的实现关键是对Date对象和setTimeout的使用。

一共有三个例子，HTML结构如下，就不添加CSS样式了。

    当前时间：
    高考倒计时：
    限时抢购：

 

 主要体会javascript的实现

window.οnlοad=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")

 

下面是完整的代码

    
                 当前时间：
    高考倒计时：
    限时抢购：