Home > Article > Web Front-end > Examples to explain the effect of multiple js millisecond countdowns at the same time_javascript skills

Examples to explain the effect of multiple js millisecond countdowns at the same time_javascript skills

WBOYOriginal: 2016-05-16 15:21:591218browse

The example in this article explains the code of js millisecond countdown and simultaneous effect, and shares it with everyone for your reference. The specific content is as follows

Rendering:

Implementation function: call a function, pass in the id of the html element, and a deadline (unix timestamp), and print out the countdown to the current deadline in the html element, accurate to milliseconds;

The rendering is as follows:

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

How to use this function?

addTimer("#id", timestamp int);

PS:

Actually, this function has a small problem: it does not display the deadline; because the boss said that our countdown time is only a few hours at most, so I am too lazy to judge the hours and days of the countdown. So many. So if the incoming timestamp is more than 1 day ago. Then you will see the result like this: 02:11:32:874~~Only 2 hours left! It's obviously wrong, isn't it?

so, there are 2 options here:

Method 1: Change var hour =Math.floor(distancetime/1000/60/60%24); to var hour =Math.floor(distancetime/1000/ 60/60);

If the deadline is more than one day ago, the hour position will display a number greater than 24; for example: 36:45:22:888

Method 2: Write another variable to calculate the number of days;

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementing random floating image ads based on JavaScript code_javascript skillsNext article：Implementing random floating image ads based on JavaScript code_javascript skills

See more

Examples to explain the effect of multiple js millisecond countdowns at the same time_javascript skills

Related articles