suchen

Heim >Web-Frontend >js-Tutorial >Beispiele zur Erläuterung der Wirkung mehrerer JS-Millisekunden-Countdowns gleichzeitig_Javascript-Kenntnisse

Beispiele zur Erläuterung der Wirkung mehrerer JS-Millisekunden-Countdowns gleichzeitig_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:21:591281Durchsuche

Das Beispiel in diesem Artikel erklärt den Code für den Millisekunden-Countdown und den gleichzeitigen Effekt und teilt ihn als Referenz mit allen. Der spezifische Inhalt ist wie folgt.

Rendering:

Implementierungsfunktion: Rufen Sie eine Funktion auf, übergeben Sie die ID des HTML-Elements und einen Termin (Unix-Zeitstempel) und geben Sie den Countdown bis zum aktuellen Termin im HTML-Element aus, genau auf Millisekunden;

Die Darstellung ist wie folgt: 

<!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>
Wie verwende ich diese Funktion?

addTimer("#id", timestamp int);

PS:

Eigentlich hat diese Funktion ein kleines Problem: Sie zeigt die Fristennummer nicht an, weil der Chef gesagt hat, dass unsere Countdown-Zeit höchstens ein paar Stunden beträgt, also bin ich zu faul, um die Stunden und Tage zu beurteilen der Countdown. So viele. Wenn also der eingehende Zeitstempel mehr als einen Tag zurückliegt. Dann sehen Sie das Ergebnis so: 02:11:32:874~~Nur noch 2 Stunden! Es ist offensichtlich falsch, nicht wahr?

hier gibt es also 2 Möglichkeiten:

Methode 1: Var Stunde =Math.floor(distancetime/1000/60/60$) ändern in var Stunde =Math.floor(distancetime/1000/60 / 60);

Wenn die Frist mehr als einen Tag zurückliegt, wird an der Stundenposition eine Zahl größer als 24 angezeigt, zum Beispiel: 36:45:22:888

Methode 2: Schreiben Sie eine weitere Variable, um die Anzahl der Tage zu berechnen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung zufälliger Floating-Image-Anzeigen basierend auf JavaScript-Code_Javascript-KenntnissenNächster Artikel：Implementierung zufälliger Floating-Image-Anzeigen basierend auf JavaScript-Code_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen