Javascript : place a number into an array, 拆分成段

Question

我有一个使用 Angular CDK 制作的自定义 HTML slider 。它可以通过拖放操作。它是垂直的，原始位置在底部。此 slider 分为 10 段，每段大小相等。

我能够获取 slider handle 位置和 slider 总高度。

slider 将用于确定一种颜色，它由 10 种颜色组成。它应该是页面的整个高度(这意味着我不能像任何普通 slider 那样使用刻度)。

假设总高度为 600px， handle 位置是随机生成的。

我想知道句柄落在哪个段中(由句柄位置给出)。

我已经使用了以下代码片段中的方法，但我发现它不是很有效。

谁能告诉我是否有更好的方法？或者甚至是为此而存在的数组运算符？

const interval = 600; // Slider total size
const segmentsNb = 10; // Total number of segments
const segmentSize = interval / segmentsNb; // Size of a single segment

function doTheThing() {
  const nb = (Math.random() * 600); // random number generation to simulate slider handle pos
  let pos = -1;
  let index = 0;
  
  do {
     if (nb > segmentSize * (index + 1)) {
       index++;
       continue;
     }
     pos = index;
  } while(pos === -1 && index <= segmentsNb);
  
  console.log('number is', Math.round(nb), 'at position', pos);
}

<button onclick="doTheThing()">Do something</button>

Answer 1

你可以接受

Math.floor(nb / segmentSize)

如你所见。也许你需要调整

const interval = 600; // Slider total size
const segmentsNb = 10; // Total number of segments
const segmentSize = interval / segmentsNb; // Size of a single segment

function doTheThing(nb) {
  //const nb = (Math.random() * 600); // random number generation to simulate slider handle pos
  let pos = -1;
  let index = 0;
  
  do {
     if (nb > segmentSize * (index + 1)) {
       index++;
       continue;
     }
     pos = index;
  } while(pos === -1 && index <= segmentsNb);
  
  return [pos, Math.floor(nb / segmentSize)].join(' ');

}

for (var i = 0; i <= 600; i++) document.getElementById('out').innerHTML += [i, doTheThing(i)].join(' ') + '\n';

<pre id="out"></pre>