HTML プログレスバーは再生の進行状況に応じて変化し、一時停止ボタンと開始ボタンが追加されます。 _html/css

Xinda 電磁環境監視プラットフォーム body { font-size: 12px; } #n { margin:10px auto; width:920px; border: 1px Solid #CCC; フォントサイズ:14px; } #n a { パディング:0 4px; .Bar ,.Bars { 位置: 相対; */ ボーダー: 1px ソリッド #B1D632; } .Bar div,.Bars div { 表示: ブロック; 背景:#00F;/* 進行状況バーの背景色: #333333; : 20px; /* 高さ */ line-height: 20px; /* テキストを垂直方向の中央に配置できるように、高さと一致する必要があります */ } .Bars div{ 背景:#090} .Bar div span, .Bars div スパン { 位置: 絶対; 幅: 200px; /* 文字列: 中央; フォントの重み: 太字; } var NowImg=1;// 現在表示されている div を示します // div の数を表します for(var i= 1 ; i & lt; = maximg; i ++) { if (nowimg == i) .style.display = 'div'; ）.style.display = 'なし'; ‐ ‐ ‐ ‐ ‐ } theTimer=setInterval("show()",1000);//タイマーを設定し、次の画面を表示 写真の場合、10000 は 10 秒ごとを意味し、変更可能です。 。 。 p> 周波数変更の進行状況:

33%

返下下 CSS进度条

回论论(解决方案) 度条の原則は、現在追加されているダウンロードソースの数と全体のソースの数の比較を計算し、divの長さの比を設定します说总共有5个div加ダウンロード了四个 进度条就は 80% の長さ

その後、関数が「現在ロードされているソースの数と全体のソースの数の比」によって id の進行状況の div の長さを制御し、その効果が達成されます。 我改了好多遍，可及次回改変的時我的图就不有能态效果啦，故我是初学者但急用代，故以能帮我改下资料，谢谢您了

信大电磁环境监测平台 body { font-size: 12px;}#n { margin: 10px auto; width: 920px; border: 1px solid #CCC; font-size: 14px; line-height: 30px;}#n a { padding: 0 4px; color: #333}.Bar,.Bars { position: relative; width: 200px; /* 宽度 */ border: 1px solid #B1D632; padding: 1px;}.Bar div,.Bars div { display: block; position: relative; background: #00F; /* 进度条背景颜色 */ color: #333333; height: 20px; /* 高度 */ line-height: 20px; /* 必须和高度一致，文本才能垂直居中 */}.Bars div { background: #090}.Bar div span,.Bars div span { position: absolute; width: 200px; /* 宽度 */ text-align: center; font-weight: bold;}.cent { margin: 0 auto; width: 300px; overflow: hidden}#status>div:not(:nth-of-type(1)){ display: none;}#btns{ text-align: center;}

频率变化进度:

stop start

返回下载 CSS进度条

非常に上の二位の兄の指示に気づき、私はコードを書き換え、機能が実現されたと評価しました。

HTML プログレスバーは再生の進行状況に応じて変化し、一時停止ボタンと開始ボタンが追加されます。 _html/css_WEB-ITnose