看标价算不清到手价？写了个折扣计算器，原价折扣秒出折后价

商场"全场 7 折"、电商"满 300 减 50"，脑子一热根本算不过来。有回我看中件衣服标价 599 打 8.5 折，站那儿按计算器按了半天。回家就写了个折扣计算器：原价、折扣一填，折后价和优惠金额立刻出来，再顺手比一比"打折"和"满减"谁更便宜，结账前心里有数。

一、折扣的本质

折后价 = 原价 × (折扣 ÷ 10)        // 比如 8.5 折就是 ×0.85
优惠金额 = 原价 − 折后价

这里折扣按"几折"算（8.5 折 = 0.85）。有些地方习惯说"85 折"也是一回事，但用户输入习惯不统一，所以界面上我直接标"折扣（如 8.5 表示八五折）"，避免歧义。

二、输入即算

监听 input，每次改动立刻重算，不用点按钮：

function calc() {
  const price = +document.getElementById('price').value;
  const off = +document.getElementById('off').value;   // 8.5 表示八五折
  if (!(price > 0) || !(off > 0)) return;
  const rate = off / 10;
  const final = price * rate;
  const cut = price - final;
  document.getElementById('final').textContent = final.toFixed(2);
  document.getElementById('cut').textContent = cut.toFixed(2);
}
document.querySelectorAll('#price,#off').forEach(el => el.addEventListener('input', calc));

rate = off / 10 是整段的关键。把"几折"归一化成乘子，后面的乘除法就顺了。

三、打折和满减谁更划算

光看折后价还不够，电商常把"打折"和"满减"并列，得放一起比：

function compare(price) {
  const offFinal = price * 0.85;                 // 八五折
  const fullCut = price >= 300 ? price - 50 : price;  // 满300减50
  return offFinal <= fullCut
    ? `打折更划算，省 ${(price - offFinal).toFixed(2)}`
    : `满减更划算，省 ${(price - fullCut).toFixed(2)}`;
}

price >= 300 那个阈值决定满减是否触发，逻辑上一定要先判门槛再减，不然 200 块也给你减 50 就错了。

折扣与满减对照

同样 599 元，不同促销下的到手价：

同一件 599 的东西，八五折比"满 300 减 50"便宜快 40 块。门槛越高的满减，未必比直接打折香。

几个容易踩的点

• 折扣语义统一：用户可能填"0.85"也可能填"85"，必须界面写死约定（本工具用"8.5=八五折"），否则同一个人两次算出不同结果。
• 浮点尾巴：599 × 0.85 在某些环境会出 509.149999...，展示用 .toFixed(2) 收尾，别直接把原始浮点贴给用户。
• 满减门槛别漏判：多档满减（满300减50、满500减80）要按顺序从大到小匹配，取到最优惠那档，别只判第一档。
• 负数与 0 防护：原价或折扣填 0、负数时提前 return，避免算出 NaN 或负价吓人。

小结

折扣计算器核心就一行 折后价 = 原价 × 折扣/10，难点在把用户的"几折"语义统一成乘子，以及把"满减"和"打折"放在同一把尺子上比。输入即算省去按钮，浮点用 toFixed 收尾，多档满减要从高门槛往下匹配取最优。结账前花十秒比一下，往往就能省出一杯奶茶钱——这才是小工具该有的用处。