JavaScript implementiert nativen Code für den Fortschrittsbalken-js-Tutorial-php.cn

JavaScript implementiert nativen Code für den Fortschrittsbalken

黄舟

Freigeben： 2017-11-21 09:29:19

Original

2208 Leute haben es durchsucht

Ich glaube, dass Freunde bei unserer täglichen Entwicklungsarbeit mit Fortschrittsbalken vertraut sind, der in unserem Projekt immer noch eine sehr wichtige Rolle spielt, daher werden wir Ihnen heute die Details unter der Einleitung von JavaScript, eine Beispielanalyse der Implementierung des Fortschrittsbalkens!

setTimeout und clearTimeou

<html> 
<head> 
<title>进度条</title> 
<style type="text/css">  
.container{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 }
#bar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
</style>  
<script type="text/javascript">  
  function run(){  
        var bar = document.getElementById("bar"); 
        var total = document.getElementById("total"); 
    bar.style.width=parseInt(bar.style.width) + 1 + "%";  
    total.innerHTML = bar.style.width; 
    if(bar.style.width == "100%"){  
      window.clearTimeout(timeout); 
      return; 
    } 
    var timeout=window.setTimeout("run()",100); 
  } 
    window.onload = function(){  
       run(); 
    }  
</script> 
  
</head> 
<body> 
  <div class="container"> 
   <div id="bar" style="width:0%;"></div>  
  </div>  
  <span id="total"></span> 
</body> 
</html>

Nach dem Login kopieren

Rendering:

<html>  
<head>  
<title>进度条</title>  
<style type="text/css">  
.processcontainer{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 } 
#processbar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
</style>  
<script type="text/javascript">  
 function setProcess(){  
  var processbar = document.getElementById("processbar");  
  processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
  processbar.innerHTML = processbar.style.width;  
  if(processbar.style.width == "100%"){  
     window.clearInterval(bartimer);  
  }  
 }  
var bartimer = window.setInterval(function(){setProcess();},100);  
window.onload = function(){  
   bartimer;  
}  
</script>  
</head>  
<body>  
  <div class="processcontainer">  
   <div id="processbar" style="width:0%;"></div>  
  </div>  
</body>  
</html>

Nach dem Login kopieren

Rendering:

3. Der Unterschied zwischen setTimeout und setInterval

setTimeout() führt den Code nur einmal aus. Wenn Sie es mehrmals aufrufen möchten, verwenden Sie setInterval(). Die Methode setInterval() ruft die Funktion so lange auf, bis clearInterval() aufgerufen oder das Fenster geschlossen wird oder der Code selbst setTimeout() erneut aufruft.

Zusammenfassung:

Ich glaube, dass Sie durch das Studium dieses Artikels ein besseres Verständnis für die JavaScript-Implementierung des Fortschritts erlangen werden Wenn Sie auf die gleiche Anforderung stoßen, können Sie auf diesen Artikel verweisen. Ich hoffe, er wird Ihnen hilfreich sein.

Verwandte Empfehlungen:

JS nativer Upload großer Dateien mit Fortschrittsbalken – PHP-Datei-Upload

Ein Beispiel für JavaScript, das einen Fortschrittsbalken basierend auf einem Timer implementiert

JavaScript, das einen Audiosteuerungsfortschritt implementiert bar

Einführung in die Methode zur Anzeige des Prozessfortschrittsbalkens durch Kombination von JS und HTML

Das obige ist der detaillierte Inhalt vonJavaScript implementiert nativen Code für den Fortschrittsbalken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!