当前位置：Gxlcms > JavaScript > js实现精确到毫秒的倒计时效果

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

时间：2021-07-01 10:21:17 帮助过：6人阅读

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <title></title>
  7.     <style>
  8.       div{
  9.         width: 100%;
  10.         height: 50px;
  11.         margin-bottom: 5px;
  12.         background: yellowgreen;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     
  18.     <h2>毫秒的倒计时</h2>
  19.     <div id="timer1"></div>
  20.     <div id="timer2"></div>
  21.     <div id="timer3"></div>
  22.     <div id="timer4"></div>
  23.     <script>
  24.       var addTimer = function(){
  25.         var list = [],
  26.           interval;
  27.           
  28.         return function(id,timeStamp){
  29.           if(!interval){
  30.             interval = setInterval(go,1);
  31.           }
  32.           list.push({ele:document.getElementById(id),time:timeStamp});
  33.         }
  34.         
  35.         function go() { 
  36.           for (var i = 0; i < list.length; i++) { 
  37.             list[i].ele.innerHTML = changeTimeStamp(list[i].time); 
  38.             if (!list[i].time) 
  39.               list.splice(i--, 1); 
  40.           } 
  41.         }
  42.         //传入unix时间戳，得到倒计时
  43.         function changeTimeStamp(timeStamp){
  44.           var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();
  45.           if(distancetime > 0){ 
  46. 　　　　　　　　　　　　　　//如果大于0.说明尚未到达截止时间       
  47.             var ms = Math.floor(distancetime%1000);
  48.             var sec = Math.floor(distancetime/1000%60);
  49.             var min = Math.floor(distancetime/1000/60%60);
  50.             var hour =Math.floor(distancetime/1000/60/60%24);
  51.             
  52.             if(ms<100){
  53.               ms = "0"+ ms;
  54.             }
  55.             if(sec<10){
  56.               sec = "0"+ sec;
  57.             }
  58.             if(min<10){
  59.               min = "0"+ min;
  60.             }
  61.             if(hour<10){
  62.               hour = "0"+ hour;
  63.             }
  64.             
  65.             return hour + ":" +min + ":" +sec + ":" +ms;
  66.           }else{
  67. 　　　　　　　　　　　　　　//若否，就是已经到截止时间了
  68.             return "已截止！"
  69.           }  
  70.         }        
  71.       }();
  72.       
  73.       addTimer("timer1",1451923200);//1月5日00点，unix时间戳自己去百度一下，就有的
  74.       addTimer("timer2",1451926800);//1月5日01点
  75.       addTimer("timer3",1451930400);//1月5日02点
  76.       addTimer("timer4",1452020400);//1月6日03点
  77.     </script>
  78.     
  79.   </body>
  80. </html>

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！