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 サイトの他の関連記事を参照してください。