Question

如何将具有数值的对象重构为短尺寸？

2022-07-28

38

javascript

我需要根据滑块的值显示特定数字。如果我计划将滑块的最大值增加到 100，我该如何重构此类代码。我认为，编写如此长的对象不是最佳解决方案。

const p = document.getElementById("price");
const result = document.getElementById("result");

const rangeObj = {
    0: 0,
  1: 0,
  2: 0,
  3: 1,
  4: 1,
  5: 1,
  6: 2,
  7: 2,
  8: 3,
  9: 3,
  10: 4,
  11: 4,
  12: 4,
  13: 5,
  14: 6,
  15: 6,
  16: 7,
  17: 7,
  18: 8,
  19: 8,
  20: 9
}

p.addEventListener("input", function() {
            console.log(p.value);
      result.innerText = rangeObj[p.value];
}, false);

<input id="price" type="range" value="" max="20"  />

<div id="result"></div>

Answer 1

您可以这样做...我添加了一个 toNearest 函数，它将四舍五入到最接近的指定值。在本例中，我希望所有值都四舍五入到最接近的 5（0-4 将产生 0 ，5-9 将产生 5 ，等等）。

function toNearest(value, goal) {
  return Math.floor(value / goal) * goal;
}
const p = document.getElementById("price");
const result = document.getElementById("result");
const actual = document.getElementById("actual");

p.addEventListener("input", function() {
   const value = toNearest(p.valueAsNumber, 5);
   result.innerText = `Result: ${value}`;
   actual.innerText = `Actual: ${p.valueAsNumber}`;
}, false);

<input id="price" type="range" value="" max="20"  />

<div id="result"></div>
<div id="actual"></div>