可进行多个调节的进度条 Javascript

【可进行多个调节的进度条】作为一个渣渣，说实在的，有逻辑的js代码，自己就要写很久，这个可以进行调节的进度条，自己一个人琢磨了好几天都没能完全实现，也看了很多网上类似的，然后改写。最后还是在公司大神的指导下完成了。核心的逻辑代码都是大神重新把我的代码精简了。啥也不说了，留着给大家以后需要的时候参考参考吧。
css:这个就不想摆出来了，用的是bootstrap框架，大家自己引用，然后自己写一下css吧。
HTML：其实里面挺多Id没有用到，但是懒得去掉了

标签 node.js c# javascript c++ java python 添加新标签权重 25% 25% 25%25%

js:
var totalW =0;
var slider_prcent={}
$(document).ready(function() {
var n = 4; //
var num = 0;
$('input[type=checkbox]').click(function() {

num = $('input[type=checkbox]:checked').length
$("input[name='labelName']").attr('disabled', true);
if($("input[name='labelName']:checked").length >= 4) {
$("input[name='labelName']:checked").attr('disabled', false);
} else {
$("input[name='labelName']").attr('disabled', false);
}
totalW = $('#parentBox').width();

var piceWidth = totalW / num;

if(num>0){
$('#qzhBox').removeClass('hide').addClass('show');
}else{
$('#qzhBox').removeClass('show').addClass('hide');
}
if(num>1){
$('.sliderBtn_Box').removeClass('hide').addClass('show');
}else{
$('.sliderBtn_Box').removeClass('show').addClass('hide');
}
for(var p = 0; p < 4; p++) {
$('#parentBox div:lt(' + (p + 1) + ')').removeClass('show').addClass('hide');
$('.sliderBtn_Box span').removeClass('show').addClass('hide');
}
for(var i = 0; i < num; i++) {
if(i!=(num-1)){
$('.sliderBtn_Box span:eq(' +(i)+ ')').removeClass('hide').addClass('show');
$('.sliderBtn_Box span:eq(' +(i)+ ')').css({'left':((i+1)*(1/num*100))+"%"});
slider_prcent[i]= i*(1/num)+(1/num)
}

$('#parentBox div:lt(' + (i + 1) + ')').removeClass('hide').addClass('show');
//console.log($('#parentBox div:lt(' + (i + 1) + ') span'))
$('#parentBox div:lt(' + (i + 1) + ') span').removeClass('hide').addClass('show');
$('#parentBox div:lt(' + (i + 1) + ')').css({'width':(1/num*100)+"%"});
$('#parentBox div:lt(' + (i + 1) + ')').html(((1/num*100).toFixed(2))+'%');
}
console.log(slider_prcent)
});
//权重选择占比
var $slider_box = $(".sliderBtn_Box .slider_box");

//遍历调节按钮
$slider_box.each(function(item, indexx) {

$(this).bind('mousedown', downFn)
});
function downFn(e) {

//当鼠标按下的时候，记录当前的鼠标信息值和盒子当前位置（可以用全局变量也可以用增加自定义属性）
$(this).attr({
markLeft: parseFloat($(this).css('left')),
markX:e.pageX
})

this.Move = moveFn.bind(this); //给当前元素增加一个Move方法，在用bind改变this关键字
this.UP = upFn.bind(this);
if(this.setCapture) { //将鼠标和这个盒子绑定在一起，要不然鼠标移动过快盒子跟不上啊注意：ie火狐都兼容，反倒是谷歌不兼容
this.setCapture();
$(this).bind('mousemove', moveFn).bind('mouseup', upFn) //给当前元素绑定鼠标移动和离开方法
} else {
//如果是火狐浏览器
$(document).bind('mousemove', this.Move).bind('mouseup', this.UP) //给整个文档绑定方法
}
e.preventDefault(); //阻止默认行为
}

function moveFn(e) {

//用当前鼠标信息的x值减去开始时候的x值，就是移动的距离，那再在mark的left的基础上加上这个距离，就是移动后的位置了
//获取当前x值
var changeX = e.pageX - $(this).attr('markX'); //现在坐标减去原始坐标等于移动的距离

var curL = parseFloat($(this).attr('markLeft')) + changeX; //原始的left加上移动的距离等于现在的left

var percent= curL/totalW;
var indexOfParent = Array.prototype.indexOf.call(this.parentElement.children,this); //获取当前元素的索引
slider_prcent[indexOfParent]= percent;

var preSliderPercent = slider_prcent[indexOfParent-1]; //最左可滑
var nextSliderPercent = slider_prcent[indexOfParent+1]; //最右可滑

if(preSliderPercent==undefined){
preSliderPercent=0;
}
if(nextSliderPercent==undefined){
nextSliderPercent=1;
}

if( preSliderPercent
var block_percent_left = percent - preSliderPercent; //左边块长度

var block_percent_right = nextSliderPercent-percent;

$(this).css({'left':curL});

$(this).parent().prev().find('div').eq(indexOfParent).css({'width': block_percent_left*100+"%"});

$(this).parent().prev().find('div').eq(indexOfParent).html((block_percent_left*100).toFixed(2)+"%")
$(this).parent().prev().find('div').eq(indexOfParent+1).css({'width': block_percent_right*100+"%"});

$(this).parent().prev().find('div').eq(indexOfParent+1).html((block_percent_right*100).toFixed(2)+"%")

}else{
return false;
}

}
function upFn(e) {
if(this.releaseCapture) {
this.releaseCapture() //将鼠标和盒子解绑
$(this).unbind('mousemove', moveFn).unbind('mouseup', upFn)
} else {
$(document).unbind('mousemove', this.moveFn)
$(document).unbind('mousemove', this.Move).unbind('mouseup', this.UP)
}
}
});