js实现精确到毫秒的倒计时效果

本文实例为大家分享了精确到毫秒的倒计时效果，供大家参考，具体内容如下

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

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

js实现精确到毫秒的倒计时效果

猜你在找的JavaScript相关文章