区间不规则的进度条，如何定位百分比？

原创已于 2023-01-31 23:19:27 修改 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #算法

于 2023-01-31 23:18:11 首次发布

JavaScript 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种处理区间不规则进度条的方法，通过划分不同区间并计算区间内的位置来精准展示进度百分比。示例代码展示了如何根据不同区间计算进度条的宽度。

区间不规则的进度条，精准显示百分比
需要划分区间，找出区间差值，计算区间内的位置，最后得出整体的百分比

	<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+"%");
	}