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

易芒客 2015-08-07 10:32:55
<!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}
</style>
<script type="text/javascript">
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>
</head>
<body>

<p> </p>
<div class="cent">
<p>
频率变化进度:
</p>
<p>
<div class="Bars">
<div style="width: 2%;">
<span>33%</span>
</div>
</div>
</p>
</div>
<p>返回下载<a href="http://www.divcss5.com/template/m411.shtml">CSS进度条</a></p>
</body>
<body onload="show()">
<div>
<div id="div1" style="display:block;"><img src="http://chuantu.biz/t2/11/1438825741x-954497768.png" /></div>
<div id="div2" style="display:none;"><img src="http://chuantu.biz/t2/11/1438825765x-954497768.png" /></div>
<div id="div3" style="display:none;"><img src="http://chuantu.biz/t2/11/1438825794x-954497768.png" /></div>
<div id="div4" style="display:none;"><img src="http://chuantu.biz/t2/11/1438825813x-954497768.png" /></div>
<div id="div5" style="display:none;"><img src="http://chuantu.biz/t2/11/1438825832x-954497768.png" /></div>
</div>
</body>
</html>
...全文
539 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
易芒客 2015-08-07
  • 打赏
  • 举报
 回复
非常感谢上面的两位仁兄给我指导，都给我编写了代码，让我如愿实现了功能。
neorobin 2015-08-07
  • 打赏
  • 举报
 回复 

<!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>
易芒客 2015-08-07
  • 打赏
  • 举报
 回复
我改了好多遍，可每次改动的时候我的图就没有动态效果啦，因为我是初学者但是急用代码，所以能不能帮我改下源代码，谢谢您了
可能黑客 2015-08-07
  • 打赏
  • 举报
 回复
进度条的原理就是计算下 当前加载资源的个数与总的资源的个数的比值，来设置div的长度 比如说 总共有5个div 加载了四个 进度条就是80%的长度 <div style="width:100px"> <div id="progress" style="background:blue"></div> </div> 然后写个函数通过 "当前加载资源的个数与总的资源的个数的比值"来控制id为progress的div的长度，实现的效果就是进度条的效果。 代码是随手写的，
jQuery带进度条播放暂停按钮焦点图切换特效
这是一款带索引按钮，左右箭头，进度条，播放暂停按钮的jQuery焦点图图片切换特效。
jQuery带进度条播放暂停按钮焦点图切换特效.zip
jQuery带进度条播放暂停按钮焦点图切换特效
按钮进度条
按钮进度条，可以点击按钮，进度开始增加，再点击按钮，进度就暂停。这个按钮进度条实质就是一个自定义的ProgressBar，同时又作为按钮来使用。
iOS实现音频进度条效果
主要介绍了ios实现音频进度条效果,本文写了一个小demo通过实例代码相结合的形式给大家详细介绍，需要的朋友可以参考下
pyqt5 实现视频播放，包含常用的进度控制、声音控制、全屏播放、截图等功能
pyqt5 实现视频播放，包含常用的进度控制、声音控制、全屏播放、截图等功能，详细介绍见：https://blog.csdn.net/u012552296/article/details/115281883?spm=1001.2014.3001.5501
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章