如何在JS中返回数组中相同次数的元素

Question

我想通过JS中的for循环使这个HTML中的42个span具有相等数量的颜色。

相等的数量是通过可以正常工作的HTML表单确定的。

例如当我键入5并单击“开始”时，则42个跨度应具有5种不同的颜色-表示8-9个跨度中的一种颜色。

我尝试使用拼接器，但没有成功。

function colorMe() {
var num = document.getElementById('quant').value;
var col = ["#CC004C", "#0080D0", "#FCB711","#0DB14B", "#6460AA", "#F37021"];
var snum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42];
  var xnum = num / 6;

for (i = 1; i <= xnum; i++) { 
  for (j = 0; j < num; j++) { 
    var y = snum.splice(Math.floor(Math.random()*snum.length-jy),1)[0];
    document.getElementById('s'+y).style.backgroundColor = col[j];
  }
}
}

这是到目前为止的代码：

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

function colorMe() {
  var num = document.getElementById('quant').value;
  var color = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"];
  var i;

  for (i = 1; i <= 42; i++) {
    document.getElementById('s' + i).style.backgroundColor =
      color[getRndInteger(0, num)];
  }
}

<form id="tion" action="" method="get">
  Player (between 2 and 6):
  <input type="number" id="quant" min="2" max="6">
  <input type="button" value="start" onclick="colorMe()">
</form>

<span id="s1">s1</span>
<span id="s2">s2</span>
<span id="s3">s3</span>
<span id="s4">s4</span>
<span id="s5">s5</span>
<span id="s6">s6</span>
<span id="s7">s7</span>
<span id="s8">s8</span>
<span id="s9">s9</span>
<span id="s10">s10</span>
<span id="s11">s11</span>
<span id="s12">s12</span>
<span id="s13">s13</span>
<span id="s14">s14</span>
<span id="s15">s15</span>
<span id="s16">s16</span>
<span id="s17">s17</span>
<span id="s18">s18</span>
<span id="s19">s19</span>
<span id="s20">s20</span>
<span id="s21">s21</span>
<span id="s22">s22</span>
<span id="s23">s23</span>
<span id="s24">s24</span>
<span id="s25">s25</span>
<span id="s26">s26</span>
<span id="s27">s27</span>
<span id="s28">s28</span>
<span id="s29">s29</span>
<span id="s30">s30</span>
<span id="s31">s31</span>
<span id="s32">s32</span>
<span id="s33">s33</span>
<span id="s34">s34</span>
<span id="s35">s35</span>
<span id="s36">s36</span>
<span id="s37">s37</span>
<span id="s38">s38</span>
<span id="s39">s39</span>
<span id="s40">s40</span>
<span id="s41">s41</span>
<span id="s42">s42</span>

Answer 1

正如@HereticMonkey所说，使用random表示无法保证每种颜色显示多少次。但是，我们可以确保随机性仅限于固定的一组选项，然后可以确保该固定的一组包含我们要随机分布的所有可能性。然后，只需删除选定的选项，我们就可以使用random，并且仍然可以保证每种颜色显示多少次。

注意：由于我们永远不想看到没有颜色的span，因此我们会过分估计所需颜色的nr。又名Math.ceil(42/num)。这意味着有时您会看到一种或两种以上的单一颜色实例比预期的多。如果发现有问题，则可以将Math.ceil(42/num)更改为Math.floor(42/num)。但是，您将不得不添加一些边缘情况逻辑来处理spans，这些逻辑最终都没有分配颜色。

const prepareColorArray = (colors, multiplicationFactor) => {
  let returnColors = colors;
  for (let i = 0; i < multiplicationFactor; i++) {
  	returnColors = [...returnColors, ...colors];
  }
  return returnColors;
}

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

const allColors = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"];
function colorMe() {
  const num = document.getElementById('quant').value;
  let color = prepareColorArray(allColors.slice(0, num), Math.ceil(42/num));

  for (let i = 1; i <= 42; i++) {
  	const j = getRndInteger(0, color.length-1);
    document.getElementById('s' + i).style.backgroundColor = color[j];
    color = color.filter((_, i) => i !== j);
  }
}

<form id="tion" action="" method="get">
  Player (between 2 and 6):
  <input type="number" id="quant" min="2" max="6">
  <input type="button" value="start" onclick="colorMe()">
</form>

<span id="s1">s1</span>
<span id="s2">s2</span>
<span id="s3">s3</span>
<span id="s4">s4</span>
<span id="s5">s5</span>
<span id="s6">s6</span>
<span id="s7">s7</span>
<span id="s8">s8</span>
<span id="s9">s9</span>
<span id="s10">s10</span>
<span id="s11">s11</span>
<span id="s12">s12</span>
<span id="s13">s13</span>
<span id="s14">s14</span>
<span id="s15">s15</span>
<span id="s16">s16</span>
<span id="s17">s17</span>
<span id="s18">s18</span>
<span id="s19">s19</span>
<span id="s20">s20</span>
<span id="s21">s21</span>
<span id="s22">s22</span>
<span id="s23">s23</span>
<span id="s24">s24</span>
<span id="s25">s25</span>
<span id="s26">s26</span>
<span id="s27">s27</span>
<span id="s28">s28</span>
<span id="s29">s29</span>
<span id="s30">s30</span>
<span id="s31">s31</span>
<span id="s32">s32</span>
<span id="s33">s33</span>
<span id="s34">s34</span>
<span id="s35">s35</span>
<span id="s36">s36</span>
<span id="s37">s37</span>
<span id="s38">s38</span>
<span id="s39">s39</span>
<span id="s40">s40</span>
<span id="s41">s41</span>
<span id="s42">s42</span>