找出达到 100 所需的值

Question

我正在制作一个 React 进度条，我想显示升级一个级别还需要多少经验值。例如，级别 1 要求点数介于 0 到 100 之间，级别 2 要求分数介于 100 到 200 之间。

我的目标是显示缩放到 100 的进度条，并在进度条中显示达到 100 并进入第二级所需的百分比，以此类推直到第 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。 那么红利就是你的等级，提醒就是他/她离下一个等级还有多少。