实例讲解多个js毫秒倒计时同时进行效果

本文实例讲解js毫秒倒计时同时进行效果的代码，分享给大家供大家参考，具体内容如下
效果图：

实现功能：调用一个函数，传入html元素的id，和一个截止时间（unix时间戳），在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒；
效果图如下：

<！DOCTYPE html><html><head><meta charset="UTF-8"><meta name="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><div id="timer1"></div><div id="timer2"></div><div id="timer3"></div><div id="timer4"></div><script>var addTimer = function（）{var list = [],interval;return function（id,timeStamp）{if（！interval）{interval = setInterval（go,1）;}list.push（{ele:document.getElementById（id）,time:timeStamp}）;}function go（） { for （var i = 0; i < list.length; i++） { list[i].ele.innerHTML = changeTimeStamp（list[i].time）; if （！list[i].time） list.splice（i--, 1）; } }//传入unix时间戳，得到倒计时function changeTimeStamp（timeStamp）{var distancetime = new Date（timeStamp*1000）.getTime（） - new Date（）.getTime（）;if（distancetime > 0）{               //如果大于0.说明尚未到达截止时间 var ms = Math.floor（distancetime%1000）;var sec = Math.floor（distancetime/1000%60）;var min = Math.floor（distancetime/1000/60%60）;var hour =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;}return hour + ":" +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>

如何使用这个函数？
addTimer（"#id",时间戳int）;
PS:
其实这个函数有一个小小的问题：就是并不会显示截止天数；因为老板表示我们的倒计时时间最多也就几个小时,所以在判断倒计时的小时和天数上，我也就懒得写那么多了。所以如果传入的时间戳距今超过了1天。那么你会看到如此结果：02:11:32:874~~只剩2个小时了！明显不对是不是？
so，有2个方案这里：
方法1：把var hour =Math.floor（distancetime/1000/60/60%24）;改成var hour =Math.floor（distancetime/1000/60/60）;
如果截止时间距今超出一天了，小时位置会显示大于24的数字；比如：36:45:22:888
方法2：你自己再写一个计算天数的变量；
以上就是本文的全部内容，希望对大家的学习有所帮助。