最近需要一个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看效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。