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

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

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>            <img  src="/static/imghw/default1.png"  data-src="http://chuantu.biz/t2/11/1438825741x-954497768.png"  class="lazy"   / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" >        </div>        <div>            <img  src="/static/imghw/default1.png"  data-src="http://chuantu.biz/t2/11/1438825765x-954497768.png"  class="lazy"   / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" >        </div>        <div>            <img  src="/static/imghw/default1.png"  data-src="http://chuantu.biz/t2/11/1438825794x-954497768.png"  class="lazy"   / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" >        </div>        <div>            <img  src="/static/imghw/default1.png"  data-src="http://chuantu.biz/t2/11/1438825813x-954497768.png"  class="lazy"   / alt="html进度条随播放进度改变，并暂停与开始按钮的添加。_html/css_WEB-ITnose" >        </div>        <div>            <img  src="/static/imghw/default1.png"  data-src="http://chuantu.biz/t2/11/1438825832x-954497768.png"  class="lazy"   / 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>

登录后复制

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn