我想让这个 HTML 中的 42 个跨度从数组到 JS 中的 for 循环具有相同数量的颜色。
等量是通过一个工作正常的 HTML 表单确定的。
例如，当我输入 5 并单击“开始”时，42 个跨度应该有 5 种不同的颜色 - 意味着 8-9 个跨度使用一种颜色。
我尝试使用 splice ，但没有成功..
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>正如@HereticMonkey 所说，使用random意味着无法保证每种颜色将出现多少次。然而，我们可以确保随机性仅限于一组固定的选项，然后我们可以确保该固定集包含我们想要随机分布的所有可能性。然后通过简单地删除选定的选项，我们可以使用random并且仍然保证每种颜色将出现多少次。
注意：因为我们永远不想看到span没有颜色的 a，所以我们会故意高估所需颜色的 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句