ホームページ > 記事 > ウェブフロントエンド > jsで動的に読み込まれるプログレスバーを作成するにはどうすればよいですか? (コード例)
この記事の内容は、動的に読み込まれるプログレスバーをjsで作成する方法を紹介することです。 (コードサンプル) は、参考にしていただければ幸いです。
進行状況バーは、実行中のタスクの進行状況を説明するために使用できます。通常、ダウンロードとアップロードのステータスを表示するために使用されます。つまり、進行状況バーを使用して、進行中のあらゆるステータスを説明できます。
JavaScript を使用して、動的に読み込まれるプログレス バーを実装する方法を見てみましょう。次の手順を実行する必要があります:
1. プログレス バーの HTML 構造を作成します:
次のコードには、「Progress_Status」と「myprogressbar」という 2 つの要素が含まれています。 " "div" タグ要素。
<div id="Progress_Status"> <div id="myprogressBar"></div> </div>
2. CSS を追加します:
次のコードは、進行状況バーの幅と背景色、および棒グラフの進行状況を設定するために使用されます。
#Progress_Status { width: 50%; background-color: #ddd; } #myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; }
3. JavaScript の追加:
次のコードは、JavaScript 関数「update」と「scene」を使用して、動的なプログレス バー (アニメーション) を作成します。
function update() { var element = document.getElementById("myprogressBar"); var width = 1; var identity = setInterval(scene, 10); function scene() { if (width >= 100) { clearInterval(identity); } else { width++; element.style.width = width + '%'; } } }
実行:
## このような読み込みスタイルは少し単調ですが、プロセス内でのユーザーの位置を示すために数値ラベルを追加することもできます。進行状況を表示するには、バーの内側または外側に新しい要素を追加します。4. 数値読み込みスタイルを追加します
JavaScript の else {} ステートメントにステートメントを追加できます:element.innerHTML = width * 1 + '%';以上です。デジタル読み込み進行状況表示のスタイルを実現でき、実行効果は次のとおりです。 要約: 上記がこの記事の全内容です。みんなの学習に役立ちます。関連するビデオ チュートリアルの詳細については、
JavaScriptTutorial をご覧ください。
以上がjsで動的に読み込まれるプログレスバーを作成するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。