この記事では、JSによる進行状況バーを実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
1.SettimeOutとClearTimeout
<html> <head> <title> progress bar </title> <style type = "text/css"> .container {width：450px;境界線：1PXソリッド＃6C9C2C;高さ：25px; } #bar {background：＃95ca0d;フロート：左;高さ：100％;テキストアライグ：センター;ラインハイト：150％; } </style> <script type = "text/javascript"> function run（）{var bar = document.getElementById（ "bar"）; var total = document.getElementById（ "合計"）; bar.style.width = parseint（bar.style.width） + 1 + "％"; total.innerhtml = bar.style.width; if（bar.style.width == "100％"）{window.cleartimeout（timeout）;戻る; } 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>複製画像：
2.SetIntervalおよびClearInterval
<html> <head> <title> progress bar </title> <style type = "text/css"> .processcontainer {width：450px;境界線：1PXソリッド＃6C9C2C;高さ：25px; } #processbar {background：＃95ca0d;フロート：左;高さ：100％;テキストアライグ：センター;ラインハイト：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> <div id = "processbar"> </div> </div> </body> </html>複製画像：
3。SettimeOutとSetIntervalの違い
setimeout（）はコードを1回だけ実行します。複数回呼び出す場合は、setInterval（）を使用する場合は、setInterval（）メソッドがClearInterval（）が呼び出されるか、ウィンドウが閉じられるまで関数を呼び出し続けます。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。