suchen

Heim >Web-Frontend >js-Tutorial >JavaScript implementiert nativen Code für den Fortschrittsbalken

JavaScript implementiert nativen Code für den Fortschrittsbalken

黄舟
黄舟Original
2017-11-21 09:29:192210Durchsuche

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

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：JS realisiert den E-Commerce-Touch-VergrößerungseffektNächster Artikel：JS realisiert den E-Commerce-Touch-Vergrößerungseffekt

In Verbindung stehende Artikel

Mehr sehen