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

JasoncodeQvQ

已于 2023-01-31 23:19:27 修改

阅读量370

点赞数

分类专栏： JavaScript 文章标签： javascript 算法

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

本文链接：https://blog.youkuaiyun.com/CodingmanNAN/article/details/128824752

版权

JavaScript 专栏收录该内容

56 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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