最近将BOM重新复习了一遍，本想使用定时器给女朋友做一个生日倒计时，奈何canvas都忘了。所以模拟了一个京东的秒杀专场倒计时。

各位小伙伴有什么建议和意见，请不吝赐教。

下面是京东首页的截图：

利用BOM提供的setInterval()方法可以实现这样的一个小功能。

HTML代码：

CSS样式表：

/*清除默认内外边距*/*{padding:0;margin:0;

}

/*设置超链接的样式*/#countdownLink{

/*将其变为块元素之后，设置宽高，宽高和背景图片的大小一致*/display:block;width:191px;height:261px;

/*设置超链接背景图片，点击图片任何位置都能访问该超链接*/background-image:url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png);

/*去掉超链接里文字的下划线*/text-decoration:none;

}

/*设置秒杀框标题的样式*/#seckill{

/*宽度设置为父元素的100%，也就是191px*/width:100%;

/*“京东秒杀”字体样式*/font-family:"黑体";font-weight:bold;color:white;font-size:32px;

/*“京东秒杀”在其所在盒子里居中*/text-align:center;

/*将京东秒杀的盒子居中,由于宽度是100%，故仅设置上下外边距即可，在这里习惯性加auto*/margin:40px auto;

}

/*消除#countDownLink和#seckill的垂直外边距重叠*/#countdownLink::before,

#countdownLink::after{content:"";display:table;clear:both;

}

/*设置场次字体大小*/#specialTime{

/*宽度设置为父元素的100%，也就是191px*/width:100%;height:20px;

/*内容居中*/text-align:center;

/*字体样式*/

/*文字大小设置默认值为15px，后面选择器里会有变动*/font-size:15px;color:white;font-family:"黑体";font-weight:bold;

/*设置一个上下外边边距,其中,上外边距会与最上边盒子的下外边距重合一部分*/margin:75px auto 20px;

}

/*JS根据场次信息添加的标签,显示时间,由于时间字体偏大,就单独设置一个p标签*/#specialTime #strong{display:inline-block;font-size:23px;

}

/*JS添加的标签,显示场次信息里的中文,字体偏小*/#specialTime #nomal{display:inline-block;

/*继承父元素字体大小*/

/*调节根据基线的偏移值,使得场次时间与中文对齐*/vertical-align:3px;

}

/*设置剩余时间所在盒子的样式*/#leftTime{width:100%;text-align:center;

}

/*时间子盒子的样式*/#hour,#minute,#second{

/*宽高*/width:30px;height:30px;

/*背景*/background-color:black;

/*字体*/color:white;font-family:"黑体";font-weight:bold;font-size:25px;

/*文字居中*/text-align:center;display:inline-block;

/*左右外边距*/margin:0 5px;

/*开启决相对定位*/position:relative;

}

/*在时和分的后面添加一个：*/#hour::after,#minute::after{content:":";position:absolute;

/*调一调冒号的位置，使其与数字对齐*/left:32px;top:-3px;

}

JS代码：

window.addEventListener("load",function(){//设置秒杀专场开始时间基于1970年的毫秒数

var startTime = +new Date("2020-03-06T17:00:00");//设置秒杀专场当天的00:00时基于1970年的毫秒数

var zeroOclock = +new Date("2020-03-06T00:00:00");//将上述两个时间相减，将结果换算成24小时制的时间放在specialTime里显示用于表明多少点的场次

var h1 = (startTime-zeroOclock)/1000/60/60;

//若时间为个数，前面补个0

h1 = h1<10?"0"+h1:h1;//获取显示场次信息的那个div元素的对象

var box = document.getElementById("specialTime");//在里面添加两个p标签，分别存放时间和描述性中文

box.innerHTML = "

"+ h1 + ":00

" + "

点场 倒计时

";//获取时分秒盒子的对象

var span = document.getElementsByTagName("span");//获取当前时间基于1970年的毫秒数

var now = +newDate;//如果开场时间未到，则不停地计时

if((startTime - now)>0){

cal();var countDown = setInterval(cal,1000);

}functioncal(){//重新获取当前时间

now = +newDate();//计算开场时间与现在时间的差

var leftTime = startTime -now;//分别计算年月日

var h = parseInt(leftTime/1000/60/60%24);

h = h < 10 ? "0" +h : h;var m = parseInt(leftTime/1000/60%60);

m= m < 10 ? "0" +m : m;var s = parseInt(leftTime/1000%60);

s = s < 10 ? "0" +s : s;//如果时间到了，则停止计时，时间没到的话，就更新倒计时

if((h+m+s)!="00000000"){

span[0].innerHTML =h;

span[1].innerHTML =m;

span[2].innerHTML =s;

}else{

span[2].innerHTML =s;

clearInterval(countDown);

}

}

})

输出结果(IE8及以下不兼容)：

原文：https://www.cnblogs.com/lilisblog/p/12427368.html