查找需要多少值才能达到100

Question

我正在制作react中的进度条，我想要展示升级一个关卡还需要多少经验值。例如，1级要求点数在0到100之间，2级要求点数在100到200之间。

我的目标是显示进度条缩放到100，并在进度条中显示达到100和进入第2级所需的百分比，以此类推，直到第10级。

const experienceLevel = () => {
console.log("DAMMMMSNN");
console.log(userData.experience);
// Level one - > to level two
if (userData.experience >= 0 && userData.experience < 100) {
return (
<>
<p className="experience__show--level"> Level 1: Novice </p>
<small className="experience__show--level--coming">
<i>You need {99 - userData.experience} points to reach level two</i>
</small>
<progress
className="experience__progression-bar__bar"
**value={userData.experience} // my issue in this place**
max="99"
></progress>
</>
);
// Level two - > to level three
} else if (userData.experience >= 100 && userData.experience < 200) {
return (
<>
<p>Level 2: Monk</p>
<small className="experience__show--level--coming">
<i>
You need {199 - userData.experience} points to reach level three
</i>
</small>
<progress
className="experience__progression-bar__bar"
value={199 - userData.experience}
max="100"
></progress>
</>
);

进度条中的数值应该呈现到达另一个关卡所需要完成的进度，即使例如关卡2是100 - 200，用户的经验值应该在100 - 200之间，但在进度条中我想将其缩放为100并呈现它。例如，如果一个人有180点经验值，他处于2级，他还需要20点经验值(我想在进度条中显示)。

Answer 1

好的，这个解决方案很简单。首先你得把这个数除以100。然后红利将是你的水平，提醒将是他/她离下一个水平有多近。