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

先展示一下效果：

动态效果：

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="https://cdn.staticfile.org/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);}

第一种自定义的进度条参考了文章：
https://blog.csdn.net/weixin_44649228/article/details/87019376
bootstrap进度条参考：
https://www.runoob.com/bootstrap/bootstrap-progress-bars.html

html——自定义进度条、bootstrap框架及layu框架进度条的使用及对比相关推荐

java闪屏怎么制作,Java Swing创建自定义闪屏:在闪屏下画进度条(一)
Java Swing创建自定义闪屏:在闪屏上画进度条(一) 由于本人十分热爱Java Swing,所以平时闲暇之余总是喜欢极尽所能去搜藏一些自认为比较"酷"的Swing代码来研究揣 ...
Android自定义View之画圆环(进阶篇:圆形进度条)
前言: 如果你想读懂或者更好的理解本篇文章关于自定义圆环或圆弧的内容.请你务必提前阅读下Android自定义View之画圆环(手把手教你如何一步步画圆环).在这篇文章中,详细描述了最基本的自定义圆环的 ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片带进度条图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
java excel进度条_导出excel 用easyui显示进度条(也适用于其他框架遮罩层，进度条)...
每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面,要么狂点导出.感知太差了~甚至用户误操作会导致服务器崩溃. 所以 ...
iOS 自定义抖音效果进度条实现拖拽修改播放进度
文章目录效果图实现原理核心代码手势响应计算出手势的进度和占的宽度比例完整代码效果图实现原理在整个进度条视图上添加拖拽手势 UIPanGestureRecognizer ,根据loc ...
java进度条动画_Android自定义控件之圆形进度条动画
本文实例为大家分享了Android实现圆形进度条动画的具体代码,供大家参考,具体内容如下首先贴上图片: 额,感觉还行吧,就是进度条的颜色丑了点,不过咱是程序员,不是美工,配色这种问题当然不在考虑范围 ...
android如何创建进度条,Android控件ProgressBar--自定义进度条及源码分析
这里用SeekBar做演示,SeekBar继承自ProgressBar,拥有其一切特性,并且其支持拖动以及DPAD左右键的进退.一起学习吧! 一.自定义SeekBar进度条样式原生SeekBar效果 ...
Android花样loading进度条（四）-渐变色环形进度条
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条,包括水平.圆形.环形.圆弧形.不规则形状等. 本篇我们对配文字环形进度条稍加变换,将圆环颜色改为渐变色的形式,使得进 ...

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

1. 第一个是自己写的一个进度条，纯js写的，样式不太好看，相关的函数进行了js的封装，且适配性不太好，不推荐，只是作为个人的尝试。

2. 第二个是bootstrap的进度条：可以控制颜色，控制样式，比如有条纹，或者动画条纹，而且函数调用修改进度条值简单，直接通过`jquery的css()与text()方法`即可动态的修改进度条的值。较为推荐使用。

3. 第三个是layui的进度条：可以控制颜色，但只有这一种样式，样式比较单一，同时框架提供的函数调用不是很方便，所有函数调用都必须写在layui.use()方法的函数体中才能生效。

综合来说，第二种bootstrap进度条使用方便，且样式相对较多。推荐使用。(这里也发现一个小bug，当你改变进度条数值改变的过快时，其变化有时是不均匀的，最后一段到100%变化较快。)

下面上实现的源代码(注意要引入bootstrap与layui的css和js文件，以及第一种自定义进度条js实现类)：

下面是自定义进度条调用的js文件代码：

html——自定义进度条、bootstrap框架及layu框架进度条的使用及对比相关推荐

最新文章

热门文章

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

1. 第一个是自己写的一个进度条，纯js写的，样式不太好看，相关的函数进行了js的封装，且适配性不太好，不推荐，只是作为个人的尝试。

2. 第二个是bootstrap的进度条：可以控制颜色，控制样式，比如有条纹，或者动画条纹，而且函数调用修改进度条值简单，直接通过jquery的css()与text()方法即可动态的修改进度条的值。较为推荐使用。

3. 第三个是layui的进度条：可以控制颜色，但只有这一种样式，样式比较单一，同时框架提供的函数调用不是很方便，所有函数调用都必须写在layui.use()方法的函数体中才能生效。

综合来说，第二种bootstrap进度条使用方便，且样式相对较多。推荐使用。(这里也发现一个小bug，当你改变进度条数值改变的过快时，其变化有时是不均匀的，最后一段到100%变化较快。)

下面上实现的源代码(注意要引入bootstrap与layui的css和js文件，以及第一种自定义进度条js实现类)：

下面是自定义进度条调用的js文件代码：

html——自定义进度条、bootstrap框架及layu框架 进度条的使用及对比相关推荐

最新文章

热门文章

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

2. 第二个是bootstrap的进度条：可以控制颜色，控制样式，比如有条纹，或者动画条纹，而且函数调用修改进度条值简单，直接通过`jquery的css()与text()方法`即可动态的修改进度条的值。较为推荐使用。

html——自定义进度条、bootstrap框架及layu框架进度条的使用及对比相关推荐