首頁 > web前端 > html教學 > html进度条随播放进度改变,并暂停与开始按钮的添加。_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:39:18
原創
1528 人瀏覽過

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进度条



    
        

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

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

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

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

            
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="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>
登入後複製

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板