ホームページ >ウェブフロントエンド >jsチュートリアル >プログレスバーを制御するJavaScriptの分析例
以前は、JavaScriptでプログレスバーを実装し、プログレスバーをネイティブに実装する方法を紹介しました。では、プログレスバーを制御するにはどうすればよいでしょうか? JS がプログレスバーを制御するために使用する要素は比較的単純で、p タグ内に spam タグを埋め込むだけです。p の外側のレイヤーは背景として使用され、span の内側のレイヤーは制御される動的進行状況の表示に使用されます。 JSによる。
全体のコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>JS控制进度条</title> <style type="text/css"> body { height:30px; width:330px; background-color:blue; } #ProgressBarBackgroundOne { background:url(ProgressBk.png) no-repeat 0 center; height:10px; width:300px; } #ProgressBarOne { background:url(ProgressFt.png) no-repeat 0 center; height:10px; width:0%; display:block; } #ProgressBarBackgroundTwo { background-color:White; height:10px; width:300px; } #ProgressBarTwo { background-color:Gray; height:10px; width:0%; display:block; } </style> <script type="text/javascript"> var numOne = 0; var numTwo = 0; function SetProgressOne() { var ProgressOne = document.getElementById('ProgressBarOne'); if (numOne < 100) { numOne = numOne + 1; } ProgressOne.setAttribute('style', 'width:' + numOne + '%'); setTimeout(SetProgressOne, 500); } function SetProgressTwo() { var ProgressTwo = document.getElementById('ProgressBarTwo'); if (numTwo < 100) { numTwo = numTwo + 1; } ProgressTwo.setAttribute('style', 'width:' + numTwo + '%'); setTimeout(SetProgressTwo, 500); } </script> </head> <body> <p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p> <p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p> </body> <script type="text/javascript"> SetProgressOne(); SetProgressTwo(); </script> </html>
表示の便宜上、htmlドキュメントに直接cssテキストとjsスクリプトを記述しました。これはプログレスバーを制御するためのネイティブjs方法です。 Node.js または mootools のような js ライブラリを使用して作成することもできます。
SetProgressOne() は進行状況を表示するために画像を使用しますが、SetProgressTwo() は進行状況を表示するために色を使用します。原理はすべて同じで、いずれも JS を通じて Span タグの属性を制御します。 style="width: デフォルト値 %" で十分です。 。パフォーマンスの点では、色を使用するよりも画像を使用する方が優れています。これは、すべてのブラウザーが CSS の角丸属性をサポートしているわけではないためです。以下は効果の比較です。
概要:
この記事の詳細な学習を通じて、JavaScript コントロールのプログレス バーについての理解が深まると思います。あなたの仕事に役立つことを願っています。 関連する推奨事項:
JavaScriptプログレスバーコントロールの実装例
プログレスバーのJavaScript実装のいくつかの方法の紹介 JavaScriptの実装progress バーのネイティブコード以上がプログレスバーを制御するJavaScriptの分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。