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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery表单验证之密码确认
May 22 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
详解webpack babel的配置
2018/01/09 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python 将pdf转成图片的方法
2018/04/23 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
pymysql 开启调试模式的实现
2019/09/24 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
市场营销专业个人自荐信格式
2013/09/21 职场文书
文案策划求职信
2014/03/18 职场文书
2014年招生工作总结
2014/11/26 职场文书
村官个人总结范文
2015/03/03 职场文书
教师见习总结范文
2015/06/23 职场文书
python前后端自定义分页器
2022/04/13 Python