先展示一下效果:
动态效果:
1. 第一个是自己写的一个进度条,纯js写的,样式不太好看,相关的函数进行了js的封装,且适配性不太好,不推荐,只是作为个人的尝试。
2. 第二个是bootstrap的进度条:可以控制颜色,控制样式,比如有条纹,或者动画条纹,而且函数调用修改进度条值简单,直接通过jquery的css()与text()方法
即可动态的修改进度条的值。较为推荐使用。
3. 第三个是layui的进度条:可以控制颜色,但只有这一种样式,样式比较单一,同时框架提供的函数调用不是很方便,所有函数调用都必须写在layui.use()方法的函数体中才能生效。
综合来说,第二种bootstrap进度条使用方便,且样式相对较多。推荐使用。(这里也发现一个小bug,当你改变进度条数值改变的过快时,其变化有时是不均匀的,最后一段到100%变化较快。)
下面上实现的源代码(注意要引入bootstrap与layui的css和js文件,以及第一种自定义进度条js实现类):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>testDemo</title><script src="/jquery/1.10.2/jquery.min.js"></script><script src="progressBar.js"></script><link rel="stylesheet" href="../../../assets/css/bootstrap.min.css"><script src="../../../assets/js/core/bootstrap.min.js"></script><link rel="stylesheet" href="../../../../layui/css/layui.css"><script src="../../../../layui/layui.js"></script><script>//定义0-100的进度条值var i=0;$(function () {//调用函数,传入父元素的jquery对象与进度条的颜色值,为rgb字符串createProgressBar($("#mainDiv"),'#60f956');setProgressBar(50);layui.use('element',function () {var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块element.init();});//给按钮绑定事件$('#startBtn').click(function () {start();});//给按钮绑定事件$('#resetBtn').click(function () {reset();});});//开始动态修改进度条值function start() {//定时函数调用设置进度条值的函数var timer = setInterval(function(){if(i>100){clearInterval(timer);return;}//控制第一个进度条的值setProgressBar(i);//控制第二个进度条值,bootstrap的进度条$('.progress-bar').css("width",i+'%');$('.progress-bar').text(i+'%');layui.use('element',function () {var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块$('.layui-progress-bar').attr('lay-percent',i+'%');element.init();element.progress('demo', i+'%');});i++;},100);}//重置进度条数值为0function reset() {i=0;setProgressBar(i);$('.progress-bar').css("width",i+'%');$('.progress-bar').text(i+'%');layui.use('element',function () {var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块$('.layui-progress-bar').attr('lay-percent',i+'%');element.init();element.progress('demo', i+'%');});}</script></head><body><div class="row" style="min-height: 30px"><div class="col-md-8"></div><div class="col-md-4"><!-- <button id="startBtn" class="layui-btn layui-btn-bg layui-btn-danger">开始</button>--><!-- <button id="resetBtn" class="layui-btn layui-btn-bg layui-btn-danger">重置</button>--></div></div><div class="row" style="height: 100px"><div class="col-md-2"></div><div class="col-md-2" style="font-weight: bolder;font-size: 18px">自定义进度条:</div><div class="col-md-4"><div id="mainDiv" style="height: 40px"></div></div></div><div class="row" style="height: 120px;"><div class="col-md-2"></div><div class="col-md-2" style="font-weight: bolder;font-size: 18px">bootstrap框架进度条:</div><div class="col-md-4"><div class="progress"><div class="progress-bar" style="width:40%">40%</div></div><br><div class="progress"><div class="progress-bar bg-warning progress-bar-striped" style="width:60%">60%</div></div><br><div class="progress"><div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:70%">70%</div></div></div></div><div class="row" style="height: 120px;"><div class="col-md-2"></div><div class="col-md-2" style="font-weight: bolder;font-size: 18px">layui框架进度条:</div><div class="col-md-4"><div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" ><div class="layui-progress-bar layui-bg-blue" lay-percent="40%" ></div></div><br><div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" ><div class="layui-progress-bar layui-bg-orange" lay-percent="60%" ></div></div><br><div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" ><div class="layui-progress-bar layui-bg-red" lay-percent="70%" ></div></div></div></div><div class="row" style="height: 60px;"><div class="col-md-6"></div><div class="col-md-4"><button id="startBtn" class="layui-btn layui-btn-bg layui-btn-normal">开始</button><button id="resetBtn" class="layui-btn layui-btn-bg layui-btn-danger">重置</button></div></div></body></html>
下面是自定义进度条调用的js文件代码:
function createProgressBar(parent,color) {var mainDivValue=$(" <div id='div'>\n" +" <aside id='aside'></aside>\n" +" <p id='p'><span id='span'>0</span>%</p>\n" +" </div>").prop("outerHTML");parent.append(mainDivValue);//获取宽高var width=parent.width();var height=parent.height();$('#div').css({"width": width,"height": height,"position": "relative","border": "2px solid","margin": "0 auto","font-size":"12px"});$('#aside').css({"height": height-4,"width":"2px","background": color});$('#p').css({"position": "absolute","top": 0,"right": 0,});}//传进来的value为0-100之间的值function setProgressBar(value) {var width=$("#div").width();if(value>=100){$("#aside").css("width",width+"px");$("#span").text("100");return;}//得到小数值var floatValue=parseFloat(value)/100;$("#aside").css("width",width*floatValue+"px");$("#span").text(value);}
第一种自定义的进度条参考了文章:
/weixin_44649228/article/details/87019376
bootstrap进度条参考:
/bootstrap/bootstrap-progress-bars.html
如果觉得《html——自定义进度条 bootstrap框架及layu框架 进度条的使用及对比》对你有帮助,请点赞、收藏,并留下你的观点哦!