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

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

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

效果图如下：

<h2>毫秒的倒计时</h2>
<div id="timer1"&gt;</div>
<div id="timer2"&gt;</div>
<div id="timer3"&gt;</div>
<div id="timer4"&gt;</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时间戳自己去<a href="https://www.jb51.cc/tag/baidu/" target="_blank" class="keywords">百度</a>一下，就有的
  addTimer("timer2",1451926800);//1月5日01点
  addTimer("timer3",1451930400);//1月5日02点
  addTimer("timer4",1452020400);//1月6日03点

</script>

如何使用这个函数？

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：你自己再写一个计算天数的变量；

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文链接：https://www.f2er.com/js/50740.html

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

猜你在找的JavaScript相关文章