Cet article décrit comment mettre en œuvre les barres de progression de JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
1.SetTimeout et Cleartimeout
<html> <éad- head> <itle> Bar de progression </tapie> <style type = "Text / CSS"> .Container {width: 450px; Border: 1px solide # 6C9C2C; hauteur: 25px; } #bar {background: # 95CA0D; flottant: à gauche; hauteur: 100%; Texte-aligne: Centre; hauteur de ligne: 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); retour; } 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>Image de reproduction:
2.SetInterval et ClearInterval
<html> <éad- head> <ititle> Bar de progression </title> <style type = "text / css"> .processContainer {width: 450px; Border: 1px solide # 6C9C2C; hauteur: 25px; } #ProcessBar {Background: # 95CA0D; flottant: à gauche; hauteur: 100%; Texte-aligne: Centre; hauteur de ligne: 150%; } </ style> <script type = "text / javascript"> fonction 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> <div id = "processBar"> </div> </div> </ody> </html>Image de reproduction:
3. La différence entre Settimeout et SetInterval
setTimeout () Exécute le code une seule fois. Si vous souhaitez appeler plusieurs fois, utilisez setInterval (), la méthode setInterval () continuera d'appeler la fonction jusqu'à ce que ClearInterval () soit appelé ou que la fenêtre soit fermée, ou laissez le code lui-même Set SetTimeout ().
J'espère que cet article sera utile à la programmation JavaScript de tous.