html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css

html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:39:18

原创

1715人浏览过

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

信大电磁环境监测平台

<script> var NowImg=1;//表示当前显示的div var MaxImg=5;//表示div的个数 function show(){ for(var i=1;i<=MaxImg;i++){ if(NowImg==i) document.getElementById("div"+NowImg).style.display='block';//当前显示的div else{ document.getElementById("div"+i).style.display='none'; } // alert(i); } if(NowImg==MaxImg)//判断当前div是否是最后一个，如果是则从第一个重新轮回显示 NowImg=1; else NowImg++;//设置下一个显示的图片 } theTimer=setInterval("show()",1000);//设置定时器，显示下一个图片，10000表示每间隔10秒，可以改的。。。 </script>

频率变化进度:

33%

返回下载CSS进度条

html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose

立即学习“前端免费学习笔记（深入）”；

回复讨论(解决方案)

进度条的原理就是计算下当前加载资源的个数与总的资源的个数的比值，来设置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>            @@##@@        </div>        <div>            @@##@@        </div>        <div>            @@##@@        </div>        <div>            @@##@@        </div>        <div>            @@##@@        </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>

登录后复制

非常感谢上面的两位仁兄给我指导，都给我编写了代码，让我如愿实现了功能。