In diesem Artikel wird beschrieben, wie die Fortschrittsbalken von JS implementiert werden. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
1.Settimeout und Clearimeout
<html> <kopf> <titels> Fortschrittsleiste </title> <style type = "text/css"> .container {width: 450px; Rand: 1PX Solid #6c9c2c; Höhe: 25px; } #Bar {Hintergrund: #95CA0D; float: links; Höhe: 100%; Text-Align: Mitte; Linienhöhe: 150%; } </style> <script type = "text/javaScript"> Funktion run () {var bar = document.getElementById ("bar"); var total = document.getElementById ("Gesamt"); bar.style.width = parseInt (bar.style.width) + 1 + "%"; Total.InnerHtml = bar.Style.width; if (bar.style.width == "100%") {window.clearTimeout (Timeout); zurückkehren; } var timeout = window.settimeout ("run ()", 100); } window.onload = function () {run (); } </script> </head> <body> <div> <div id = "bar"> </div> </div> <span id = "total"> </span> </body> </html>Reproduktionsbild:
2.SetInterval und ClearInterval
<html> <kopf> <titels> Fortschrittsleiste </title> <style type = "text/css"> .processcontainer {width: 450px; Rand: 1PX Solid #6c9c2c; Höhe: 25px; } #Processbar {Hintergrund: #95CA0D; float: links; Höhe: 100%; Text-Align: Mitte; Linienhöhe: 150%; } </style> <script type = "text/javaScript"> FunktionsetProcess () {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> <div id = "processBar"> </div> </div> </body> </html>Reproduktionsbild:
3. Der Unterschied zwischen SetTimeout und SetInterval
setTimeout () führt Code nur einmal aus. Wenn Sie mehrmals aufrufen möchten, werden setInterval () verwendet, die setInterval () -Methode wird die Funktion weiterhin aufrufen, bis ClearInterval () aufgerufen oder das Fenster geschlossen ist, oder lassen Sie den Code selbst wieder aufrufen setTimeout ().
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.