失眠网 > html——自定义进度条 bootstrap框架及layu框架进度条的使用及对比

html——自定义进度条 bootstrap框架及layu框架进度条的使用及对比

时间：2023-02-09 07:37:36

先展示一下效果：

动态效果：

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"></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>