Home >Web Front-end >HTML Tutorial >The html progress bar changes with the playback progress, and pause and start buttons are added. _html/css_WEB-ITnose
The html progress bar changes with the playback progress, and pause and start buttons are added. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:181516browse
82e4865872727f41d1edae4f463247d6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
02741e1fff959744b90781ed204b1f10
b2386ffb911b14667cb8f0f91ea547a7Xinda Electromagnetic Environment Monitoring Platform6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
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; /* width */ border: 1px solid #B1D632; padding: 1px; }
.Bar div,.Bars div { display: block; position: relative; background:#00F;/* progress bar background color */ color: #333333; height: 20px; /* height */ line-height: 20px; /* must be consistent with the height so that the text can be vertically centered */ }
.Bars div{ background:#090}
.Bar div span,.Bars div span { position: absolute; width: 200px; /* width */ text-align: center; font-weight: bold ; }
.cent{ margin:0 auto; width:300px; overflow:hidden}
531ac245ce3e4fe3d50054a55f265927
4ec11beb6c39d0703d1751d203c17053
var NowImg= 1;//Indicates the currently displayed div
else{
document.getElementById(" div" i).style.display='none';
If(NowImg==MaxImg)//Determine whether the current div is the last one , if so, display again from the first one
",1000);//Set the timer to display the next picture. 10000 means every 10 seconds, which can be changed. . .
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e388a4556c0f65e1904146cc1a846bee 94b3e26ee717c64999d7867364b1b4a3
b1e5d3621e3cbab8cec76b20ab8ac5f2
e388a4556c0f65e1904146cc1a846bee
Frequency change progress:
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
bc4afd2321af081acfc7870121a89cca
div style="width: 2%;">
45a2772a6b6107b401db3c9b82c049c233%54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
e388a4556c0f65e1904146cc1a846bee返回下载7a522477f1ccce05b039c1819ba187ddCSS进度条5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
83b6bde8203d5a137b7bef41fa6e6224
dc6dce4a544fdca2df29d5ac0ea9906b
2b03f446b49219ae856087655c50462a36bfeec938b39af35ff0b7248cf37f4f16b28748ea4df4d9c2150843fecfba68
76ec071feeb02557bdf1f5c96d66d2d095cd21beff83e3be7c49a58a66f8c8d716b28748ea4df4d9c2150843fecfba68
1fa51d5481e6e76b06648ab5f238770b7d673b87e96ec3d7dc71e3cc7e81197c16b28748ea4df4d9c2150843fecfba68
c059e1bd5b98091a0e151e886b4d73566348a2c6e290d5b0ee40027497c1522116b28748ea4df4d9c2150843fecfba68
1184d8dc1b55496cba6a53fd46667b35789b862e5e2f5c63bd40671bc8fbc02716b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
回复讨论(解决方案)
进度条的原理就是计算下 当前加载资源的个数与总的资源的个数的比值，来设置div的长度 比如说 总共有5个div 加载了四个
进度条就是80%的长度
03d77038144608643d06db3670d3c1ac
6bbd99b7ea46c827e5b03d38e01f5d3816b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
然后写个函数通过 "当前加载资源的个数与总的资源的个数的比值"来控制id为progress的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> 非常感谢上面的两位仁兄给我指导，都给我编写了代码，让我如愿实现了功能。