Maison >interface Web >tutoriel HTML >html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose
html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:39:181511parcourir
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script> <br /> var NowImg=1;//表示当前显示的div <br /> var MaxImg=5;//表示div的个数 <br /> function show(){ <br /> for(var i=1;i<=MaxImg;i++){ <br /> if(NowImg==i) <br /> document.getElementById("div"+NowImg).style.display='block';//当前显示的div <br /> else{ <br /> document.getElementById("div"+i).style.display='none'; <br /> } <br /> // alert(i); <br /> } <br /> if(NowImg==MaxImg)//判断当前div是否是最后一个，如果是则从第一个重新轮回显示 <br /> NowImg=1; <br /> else <br /> NowImg++;//设置下一个显示的图片 <br /> } <br /> theTimer=setInterval("show()",1000);//设置定时器，显示下一个图片，10000表示每间隔10秒，可以改的。。。 <br /> </script>
频率变化进度:
33%
返回下载CSS进度条
回复讨论(解决方案)
进度条的原理就是计算下 当前加载资源的个数与总的资源的个数的比值，来设置div的长度 比如说 总共有5个div 加载了四个
进度条就是80%的长度
然后写个函数通过 "当前加载资源的个数与总的资源的个数的比值"来控制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" / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" > </div> <div> <img src="http://chuantu.biz/t2/11/1438825765x-954497768.png" / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" > </div> <div> <img src="http://chuantu.biz/t2/11/1438825794x-954497768.png" / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" > </div> <div> <img src="http://chuantu.biz/t2/11/1438825813x-954497768.png" / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" > </div> <div> <img src="http://chuantu.biz/t2/11/1438825832x-954497768.png" / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" > </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> 非常感谢上面的两位仁兄给我指导，都给我编写了代码，让我如愿实现了功能。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：练习css和js有什么好的书推荐_html/css_WEB-ITnoseArticle suivant：css浏览器兼容问题(在IETester及其他浏览器中亲试过)_html/css_WEB-ITnose