如何在JS健身重量计算器中实现百分比计算与杠铃重量适配取整

需求说明 #

我正在开发一款健身重量计算器，核心功能如下：

• 用户输入训练重量（Training Max）
• 根据选中的训练计划（预设在数组对象中，比如示例里的531计划），计算对应周次、组次的训练重量
• 计算结果需适配健身房常见的杠铃重量规格（以2.5kg为间隔，如80kg、82.5kg、85kg等），支持用户选择向上取整或向下取整

示例：输入125kg，按65%计算得81.25kg，需适配为80kg（向下）或82.5kg（向上）

现有代码问题 #

当前代码使用Math.floor和Math.ceil按整数取整，无法匹配2.5kg的间隔要求，导致输出的重量不符合健身房实际配置。

解决方案 #

1. 实现重量适配函数 #

先写一个通用函数，专门处理重量到指定间隔的取整逻辑：

// 适配重量到指定间隔的倍数
// weight: 计算后的原始重量
// roundDirection: 'up' 向上取整 / 'down' 向下取整
// interval: 重量间隔，默认2.5kg
function fitBarbellWeight(weight, roundDirection, interval = 2.5) {
  if (isNaN(weight)) return 0;
  const factor = weight / interval;
  const roundedFactor = roundDirection === 'up' ? Math.ceil(factor) : Math.floor(factor);
  return roundedFactor * interval;
}

2. 优化核心计算函数 #

重构calculateNow函数，简化逻辑、复用适配函数，并支持批量计算：

const workouts = [
  {
    type: "531",
    supp: "bbs",
    amrap: true,
    sets: {
      main: {
        percentages: {
          week1_1: 65,
          week1_2: 75,
          week1_3: 85,
          week2_1: 70,
          week2_2: 80,
          week2_3: 90,
          week3_1: 75,
          week3_2: 85,
          week3_3: 95,
        },
      },
      supp: {
        reps: 5,
        set1: 65,
        set2: 65,
        set3: 65,
        set4: 65,
        set5: 65,
      },
    },
  },
];

function calculateNow(opt) {
  // 获取选中的取整方向
  const selectedRoundDir = document.querySelector('.drop-radio:checked')?.value || 'down';
  const resultElements = document.querySelectorAll(".drop-result");
  const inputWeight = parseFloat(opt.value);
  
  // 验证输入有效性
  if (isNaN(inputWeight) || inputWeight <= 0) {
    resultElements.forEach(el => el.textContent = '请输入有效重量');
    return;
  }

  // 批量计算第一周三组重量
  const week1Percentages = [
    workouts[0].sets.main.percentages.week1_1,
    workouts[0].sets.main.percentages.week1_2,
    workouts[0].sets.main.percentages.week1_3
  ];

  week1Percentages.forEach((percent, index) => {
    const rawWeight = (inputWeight / 100) * percent;
    const fittedWeight = fitBarbellWeight(rawWeight, selectedRoundDir);
    resultElements[index].textContent = `${fittedWeight}kg`;
  });
}

3. 配套HTML示例（参考） #

确保单选按钮能传递取整方向：

<div>
  <label>
    <input type="radio" class="drop-radio" name="round-dir" value="down" checked>
    向下取整（取最近的更小规格）
  </label>
  <label>
    <input type="radio" class="drop-radio" name="round-dir" value="up">
    向上取整（取最近的更大规格）
  </label>
</div>

<input type="number" class="di-1" oninput="calculateNow(this)" placeholder="输入训练重量">
<div class="drop-result"></div>
<div class="drop-result"></div>
<div class="drop-result"></div>

关键说明 #

• 适配函数支持自定义间隔，如果健身房有不同规格（比如1kg间隔），只需修改interval参数
• 加入输入验证，避免无效数值导致的计算错误
• 批量处理组次计算，减少重复代码，后续扩展其他周次只需添加对应百分比数组

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