说一下思路,这里用到的js方法需要有一个类似java的调度器,每隔多少秒执行一次;css方面,是一个父子标签,父标签长宽固定,子标签宽度被js控制,子标签的背景色表示进度条;
再看代码就简答多了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.process-parent {
position: absolute;
width: 400px;
border: 1px solid #ccc;
height: 10px;
border-radius: 3px;
}
.process-son {
position: relative;
background: #ff0000;
height: 100%;
font-size: 8px;
text-align: center;
color: #fff;
}
</style>
<body>
<div class="process-parent">
<div class="process-son" id="bar" style="width: 0%;">
</div>
</div>
</body>
<script type="text/javascript">
function run() {
var bar = document.getElementById("bar");
bar.style.width = parseInt(bar.style.width) + 1 + "%";
bar.innerText = bar.style.width;
if (bar.style.width == "100%") {
clearTimeout(timeout);
return;
}
var timeout = setTimeout('run()', 300);
}
window.onload = run();
</script>
</html>
想把这块代码简化下,html这边,只需要给定宽和高固定的div,js这边提供一个方法,参数为标签id,时间间隔以及每次间隔增加的百分比。
分享到:
相关推荐
css+Js实现动态进度条的动态加载的特效,同时含有示例页面
css+js圆形进度条
脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...
js 实现 CSS+JS制作的进度条! 值得下载看看!资源免费,大家分享!!
用CSS+JS实现的进度条效果效果
js+css编写进度条的实例,样式可以自己修改
用html5 javascript实现的视频自定义进度条。可以直接用到开发视频监控回放的进度条。纯javascript css html 实现。本资源已完成了视频播放的开始,暂停,调节进度等功能。
使用css3来实现环形进度条,只传入百分比中的数字即可展示环形状态,可以根据具体需求进行代码修改。写在最后的:csdn不支持上传资源的编辑只能再上传一遍有sass代码的文件。。
使用html5的canvas插件,配合css3就可以在页面上画出漂亮的环形进度条。
用html+js实现的本地音乐播放器,无需插件即可运行,上传音乐、上一曲、下一曲、暂停、播放、列表循环、单曲循环、随机播放、音乐时长、进度条、进度条点击跳转播放这些基本功能都有,同时还实现了音频可视化,绘制...
本文实例为大家分享了javascript+css实现进度条效果的具体代码,供大家参考,具体内容如下 主要是以样式实现进度条的效果,JavaScript控制显示的百分比 html模板 <span id=progress class=progress_bac></span> ...
jQuery+CSS3进度条动画特效.zip
原生js+css写的进度条,js交互性比较强
一个非常不错的纯javascript+css网页进度条(值得收藏) 收藏经典,拒绝平庸
本播放器功能主要有: 播放暂停,音乐进度,音乐进度计时,音量调节,快进退,重播,切换歌曲(本地歌曲) 拖拉进度条播放
css+js如何实现简单的动态进度条效果?.docx
进度条动态计算宽度html+css+js
本篇文章主要介绍Javascript+CSS3实现进度条效果,可以实现给用户一个等待的过程,有需要的可以了解一下。