基于JavaScript计算进度条点数占比的问题求助

原代码的核心问题是没区分「当前等级内的相对进度」和「前面等级的累计进度」，尤其是第三等级直接用总点数除以等级最大值，导致进度条会拉满到100%，还和前两个等级的区间衔接混乱。

正确计算思路 #

把整个进度条100%拆成三个均等区间（各约33.33%），每个等级对应一个区间：

• Level1（0-999）：用当前点数占Level1总点数的比例，乘以33.33%
• Level2（1000-1999）：先拿33.33%的基础值，再加当前点数减去Level2起点（1000）后，占Level2总点数的比例乘以33.33%
• Level3（2000-4999）：先拿66.66%的基础值，再加当前点数减去Level3起点（2000）后，占Level3总点数的比例乘以33.33%

修正后的代码 #

const LEVEL1_MAX = 999;
const LEVEL2_START = 1000;
const LEVEL2_MAX = 1999;
const LEVEL3_START = 2000;
const LEVEL3_MAX = 4999;
const PER_LEVEL_PROGRESS = 100 / 3; // 每个等级对应约33.33%进度

const calculateProgress = (currentPoints) => {
    // 限制点数在有效范围内，避免异常值
    currentPoints = Math.max(0, Math.min(currentPoints, LEVEL3_MAX));

    if (currentPoints <= LEVEL1_MAX) {
        // Level1：0% ~ 33.33%
        return (currentPoints / LEVEL1_MAX) * PER_LEVEL_PROGRESS;
    } else if (currentPoints <= LEVEL2_MAX) {
        // Level2：33.34% ~ 66.66%
        const level2Relative = (currentPoints - LEVEL2_START) / (LEVEL2_MAX - LEVEL2_START);
        return PER_LEVEL_PROGRESS + level2Relative * PER_LEVEL_PROGRESS;
    } else {
        // Level3：66.67% ~ 99.99%
        const level3Relative = (currentPoints - LEVEL3_START) / (LEVEL3_MAX - LEVEL3_START);
        return PER_LEVEL_PROGRESS * 2 + level3Relative * PER_LEVEL_PROGRESS;
    }
};

// 测试示例
console.log(calculateProgress(0));      // 0%
console.log(calculateProgress(999));    // ~33.33%
console.log(calculateProgress(1000));   // ~33.33%
console.log(calculateProgress(1999));   // ~66.66%
console.log(calculateProgress(2000));   // ~66.66%
console.log(calculateProgress(4999));   // ~99.99%（符合需求的99.9%）

代码说明 #

• 用常量定义各等级参数，后续调整更方便
• 加了边界值处理，确保点数超出范围时也能输出合理进度
• 每个等级的计算逻辑清晰，严格对应需求的进度区间

内容的提问来源于stack exchange，提问作者Antonio