jQuery实现html可联动的百分比进度条


Posted in jQuery onMarch 26, 2020

最近需要一个HTML可以联动的百分比进度条,网上找了一下没有,自己手动实现了一个。

需要解决的问题,AB两个进度条需要按照百分比A+B=100%,A进度条可以拖动,B进度条联动,并且有进度颜色的变化。实现功能如下:

HTML代码:

<div class="percentage-container" >
  <div class="a-percentage" data-x='30'>
   <div class="a-percentage-bar"></div>
  </div>
 <div class="b-percentage" data-x='70'>
   <div class="b-percentage-bar"></div>
  </div>
</div>

CSS代码:

.percentage-container {
 margin: 20px auto;
 width: 600px;
 text-align: center;
}
 
.percentage-container .a-percentage {
 margin: 0;
 width: 400px;
 cursor:pointer;
}
 
.a-percentage {
 float:left;
 padding: 2px;
 background: rgba(0, 0, 0, 0.25);
 border-radius: 6px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
 
.a-percentage-bar {
 position: relative;
 height: 16px;
 border-radius: 4px;
 -webkit-transition: 0.2s linear;
 -moz-transition: 0.2s linear;
 -o-transition: 0.2s linear;
 transition: 0.2s linear;
 -webkit-transition-property: width, background-color;
 -moz-transition-property: width, background-color;
 -o-transition-property: width, background-color;
 transition-property: width, background-color;
 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
 background: url("img/stripes.png") 0 0 repeat;
 background-color: #FF5400;
}
 
.percentage-container .b-percentage {
 margin: 0;
 width: 400px;
 cursor:pointer;
}
 
.b-percentage {
 float:left;
 padding: 2px;
 background: rgba(0, 0, 0, 0.25);
 border-radius: 6px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
 
.b-percentage-bar {
 position: relative;
 height: 16px;
 border-radius: 4px;
 -webkit-transition: 0.2s linear;
 -moz-transition: 0.2s linear;
 -o-transition: 0.2s linear;
 transition: 0.2s linear;
 -webkit-transition-property: width, background-color;
 -moz-transition-property: width, background-color;
 -o-transition-property: width, background-color;
 transition-property: width, background-color;
 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
 background: url("img/stripes.png") 0 0 repeat;
 background-color: #FF5400;
}

JS代码:

$(document).ready(function (){
 var w = $('.a-percentage').width();
 var pos_x = $('.a-percentage').offset().left;
 var inti_x = $('.a-percentage').attr('data-x')*4;
 setProgressAndColor(inti_x, w);
 
 $('.a-percentage').click(function(e) { 
 var x = e.originalEvent.x || e.originalEvent.layerX || 0; 
 x = x - pos_x;
 if(x > 0 && x < w){
  setProgressAndColor(x, w);
 }
 });
});

function setProgressAndColor(p, width){
 $('.a-percentage-bar').width(p)
 $('.a-percentage-bar').css('background-color',calcColor(p));
 var per = Math.floor(p/4);
 $('.a-percentage-bar').attr('data-x',per);
 
 $('.b-percentage-bar').width(width-p)
 $('.b-percentage-bar').css('background-color',calcColor(width-p));
 per = 100-per;
 $('.b-percentage-bar').attr('data-x', per);
}

function calcColor(x){
 var R = 255
 var G = 15;
 var tmp = Math.floor(G+x);//取整保证RGB值的准确
 if(tmp <= 255){
 return 'rgb(255,'+tmp+',15)'
 } else {
 R = (R-(tmp-255));
 return 'rgb('+R+',255,15)'
 }
}

用了简单JQuery做支撑,需要引入JQuery看效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
简单实现jQuery弹幕效果
May 06 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jquery实现手风琴案例
May 04 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
You might like
php ios推送(代码)
2013/07/01 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python中的枚举类型示例介绍
2019/01/09 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
django如何自己创建一个中间件
2019/07/24 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
借款担保书范文
2014/05/13 职场文书
公司贷款承诺书
2014/05/30 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
未婚证明范本
2015/06/15 职场文书
新党员入党决心书
2015/09/22 职场文书