TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
初心者のチュートリアルのコードなど、Bootstrapフレームワークによって提供される進捗バー
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40％完了</span> </div> </div>
私のような本当の初心者である私をさせてください、方法を知らないでください...それが本当の進歩バーになりましょう。ただし、Baiduを数回入力した後、協力するためにjQueryコードを追加することによってのみこれを達成できます。私の学位はついに次のように実現され、少し幸せです。
<div id = "mymodal1" tabindex = "-1" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true" data-backdrop = "static"> <div> <span <div> <span style = "text-align：center; color：red">ファイルはアップロードしないでください。 </span> <br/> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
上記の段落は、ポップアップボックスを使用して進行状況バーを含むことです。そうでなければ、どうすれば隠れ始める何かを達成できますか？ BootstrapをProgress Barまたは固定ポップアップボックスとして使用する場合、Data-BackDrop = "Static"を追加する方が優れています。この変更がなければ、マウスをクリックしてポップアップボックスが消えます。
<Scripts> var p = 101; var stop = 1; function run（）{p += 4; $（ "div [class = bar]"）。css（ "width"、p + "％"）; var timer = setimeout（ "run（）"、500）; if（p> 100 && stop <1）{p = 0; }} $（ '＃btnsubmit'）。クリック（function（）{$（ '＃mymodal1'）。モーダル（ 'show'）; p = 0; stop = 0; run（）; $（ '＃upload'）。submit（）;}）; </scripts>実際、ブートストラップの進行状況バーはCSSスタイルを通じて表示されます。そのため、スタイル幅の値を変更し続ける限り、表示できます。もちろん、私のサイクルでは、更新ページは再発見されて隠すことしかできません。その場合は、投稿で送信してから、返品値に基づいて判断し、$（ '＃mymodal1'）で非表示にします。モーダル（ 'hide'）;対応する停止値を1に変更します。そうしないと、実行を続けます。