可进行多个调节的进度条

作为一个渣渣，说实在的，有逻辑的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)
                    }

                }

            });