js实现精确到毫秒的倒计时效果
本文实例为大家分享了精确到毫秒的倒计时效果，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<style>
div{
width:100%;
height:50px;
margin-bottom:5px;
background:yellowgreen;
}
</style>
</head>
<body>
<h2>毫秒的倒计时</h2>
<divid="timer1"></div>
<divid="timer2"></div>
<divid="timer3"></div>
<divid="timer4"></div>
<script>
varaddTimer=function(){
varlist=[],
interval;
returnfunction(id,timeStamp){
if(!interval){
interval=setInterval(go,1);
}
list.push({ele:document.getElementById(id),time:timeStamp});
}
functiongo(){
for(vari=0;i<list.length;i++){
list[i].ele.innerHTML=changeTimeStamp(list[i].time);
if(!list[i].time)
list.splice(i--,1);
}
}
//传入unix时间戳，得到倒计时
functionchangeTimeStamp(timeStamp){
vardistancetime=newDate(timeStamp*1000).getTime()-newDate().getTime();
if(distancetime>0){
//如果大于0.说明尚未到达截止时间
varms=Math.floor(distancetime%1000);
varsec=Math.floor(distancetime/1000%60);
varmin=Math.floor(distancetime/1000/60%60);
varhour=Math.floor(distancetime/1000/60/60%24);
if(ms<100){
ms="0"+ms;
}
if(sec<10){
sec="0"+sec;
}
if(min<10){
min="0"+min;
}
if(hour<10){
hour="0"+hour;
}
returnhour+":"+min+":"+sec+":"+ms;
}else{
//若否，就是已经到截止时间了
return"已截止！"
}
}
}();
addTimer("timer1",1451923200);//1月5日00点，unix时间戳自己去百度一下，就有的
addTimer("timer2",1451926800);//1月5日01点
addTimer("timer3",1451930400);//1月5日02点
addTimer("timer4",1452020400);//1月6日03点
</script>
</body>
</html>
更多关于倒计时的文章请查看专题：《倒计时功能》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。