区间不规则的进度条,精准显示百分比
需要划分区间,找出区间差值,计算区间内的位置,最后得出整体的百分比
<div style="width:1000px;">
<div id="pro"></div>
</div>
以下方进度条为例,总长为100,ABC分为两段,每段50
var proNum = "";
if(proNum<=A) {
$("#pro").css("width","0%");
} else if(proNum>A && proNum<=B) {
proNum = (proNum-A)/(B-A)*50;
$("#pro").css("width",proNum+"%");
} else if (proNum>B && proNum<=C) {
proNum = (proNum-B)/(C-B)*50;
proNum += 50;
$("#pro").css("width",proNum+"%");
}
示例:
进度区间
[10,30,80]
,当proNum
为40时,进度百分比则是60%
var proNum = "40";
if(proNum<=10) {
$("#pro").css("width","0%");
} else if(proNum>10 && proNum<=30) {
proNum = (proNum-10)/20*50;
$("#pro").css("width",proNum+"%");
} else if (proNum>30 && proNum<=80) {
proNum = (proNum-30)/50*50;
proNum += 50;
$("#pro").css("width",proNum+"%");
}