ホームページ > 記事 > ウェブフロントエンド > HTML プログレスバーは再生の進行状況に応じて変化し、一時停止ボタンと開始ボタンが追加されます。 _html/css_WEB-ITnose
HTML プログレスバーは再生の進行状況に応じて変化し、一時停止ボタンと開始ボタンが追加されます。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:181460ブラウズ
340c751c9d1fed45028dd662187b765c
699fe6c623a564d594cbaa6898576330
b2386ffb911b14667cb8f0f91ea547a7Xinda 電磁環境監視プラットフォーム6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
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; /* 文字列: 中央; フォントの重み: 太字; }
e31d3220c1f88e7cdbdd3454d342d252
4ec11beb6c39d0703d1751d203c17053
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 秒ごとを意味し、変更可能です。 。 。
2cacc6d41bbb37262a98f745aa00fbf0
6c04bd5ca3fcae76e30b72ad730ca86d
d4a010240634e8ac14a142db2202da13 p>
周波数変更の進行状況:
7e3645beb332bf1bc96b8efbbc54221a
1ef9a6174f0ba4ff8eead0346558a622 33%
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
e388a4556c0f65e1904146cc1a846bee返下下c5670b7ab8502605bf8dcf3bd50935fbCSS进度条5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
19c593196eaf80b008c7ad0dacdb43ed
dc6dce4a544fdca2df29d5ac0ea9906b
a5555d5b2621c4d045b53561ebe63b7e3e2a749568b2eb2ad0c71a6bc98d45126217fa5fbe9b02ff9e2199473c39c7c8427323bbac1f7be88313acf0014227746af9379bd45aa3f0cbb832cdeef30644294125219660d67eb2bada4c535bbd9061d09261e9c96c24d13189897dfa787df9ccf310ea2a3222f81968f7c6a8b5d24e24c5f5288d588f6b4cab3a3169bd198935f4eb5984e3231751c331197c566c 16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
回论论(解决方案)
度条の原則は、現在追加されているダウンロードソースの数と全体のソースの数の比較を計算し、divの長さの比を設定します说总共有5个div加ダウンロード了四个
进度条就は 80% の長さ
4c068d0cb34276deb445a000eb9ee7e9
12c40b643e5fe6d289b65c053a1b144516b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
その後、関数が「現在ロードされているソースの数と全体のソースの数の比」によって id の進行状況の div の長さを制御し、その効果が達成されます。
我改了好多遍，可及次回改変的時我的图就不有能态效果啦，故我是初学者但急用代，故以能帮我改下资料，谢谢您了
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>信大电磁环境监测平台</title><style>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;}</style></head><body> <p> </p> <div class="cent"> <p>频率变化进度:</p> <p> <div class="Bars"> <div style="width: 0%;"> <span></span> </div> </div> </p> </div> <p id="btns"> <button onclick="stop(timer)">stop</button> <button onclick="start('show();', delay);">start</button> </p> <p> 返回下载<a href="http://www.divcss5.com/template/m411.shtml">CSS进度条</a> </p></body><body> <div id="status"> <div> <img src="http://chuantu.biz/t2/11/1438825741x-954497768.png" /> </div> <div> <img src="http://chuantu.biz/t2/11/1438825765x-954497768.png" /> </div> <div> <img src="http://chuantu.biz/t2/11/1438825794x-954497768.png" /> </div> <div> <img src="http://chuantu.biz/t2/11/1438825813x-954497768.png" /> </div> <div> <img src="http://chuantu.biz/t2/11/1438825832x-954497768.png" /> </div> </div></body></html><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>var current = 1;var delay = 1000;var timer;timer = start("show();", delay);function start(cod, delay){ return timer = setInterval(cod, delay);}function stop(timer) { timer = clearInterval(timer);};function show(){ var len = $('#status>div').length; $('#status>div:nth-of-type('+current+')').css('display', 'none'); current = current % len + 1; $('#status>div:nth-of-type('+current+')').css('display', 'block'); $('.Bars>div>span').html(Math.round(current * 100 / len) + '%'); $('.Bars>div').css('width', Math.round(current * 100 / len) + '%');}</script> 非常に上の二位の兄の指示に気づき、私はコードを書き換え、機能が実現されたと評価しました。