JavaScript プログレスバーコントロールの実装例

前回の記事では、JavaScriptプログレスバーを実装するいくつかの方法と、JavaScriptによるプログレスバーのネイティブ実装の事例を紹介しましたので、今日は引き続きJavaScriptプログレスバーコントロールの実装例を紹介します。 ！

まず、スパンが埋め込まれた p を定義します:

<p id="loadbar">
<span id="bar"  style="width: 10%;">10%</span>
</p>

次に、CSS を使用して進行状況バーのスタイルを完成させます:

	p#loadbar{
				width:300px;
				background-color: silver;
				border:1px solid salmon;
				text-align: center;
				border-radius:8px ;
			}
			#bar{
				display: block;
				font-family: arial;
				font-size: 12px;
				background-color: sandybrown;
				text-align: center;
				padding: 5px;
				border-radius:5px ;
				 
			}

最後に、js を使用して進行状況バーの表示を制御します:

		var i=0; 
			function startbar(){
				var showbar=setInterval("setbar()",1000);
			}
			function setbar(){
				console.log("setbar");
				i+=5;
				if(i>=100)
				{ 
					clearInterval(showbar);
			    }
				document.getElementById("bar").style.width=i+"%";
				document.getElementById("bar").innerHTML=i+"%";
			}
			
			startbar();

効果は次のとおりです:

概要:

この記事を勉強することで、皆さんは JavaScript プログレスバー コントロールの実装をある程度理解できたと思います。あなたの仕事に役立ちます！

関連する推奨事項:

JavaScriptでプログレスバーを実装するいくつかの方法の紹介

プログレスバーを実装するためのJavaScriptネイティブコード

JSネイティブアップロードファイル表示プログレスバー - PHPファイルアップロード

以上がJavaScript プログレスバーコントロールの実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。