随机化脚本中的颜色

Question

我有这个脚本可以在页面刷新时为一组数字生成随机顺序，我也想随机化数字的颜色（每个数字都有不同的颜色）。也可能是每个数字都有固定的颜色，并且由于数字随机化，它们看起来是随机的。我也不知道该怎么做。非常感谢任何帮助。

var contents=new Array()
contents[0]='0'
contents[1]='1'
contents[2]='2'
contents[3]='3'
contents[4]='4'
contents[5]='5'
contents[6]='6'
contents[7]='7'
contents[8]='8'
contents[9]='9'
contents[10]='10'
contents[11]='11'
contents[12]='12'
contents[13]='13'
contents[14]='14'
contents[15]='15'
contents[16]='16'
contents[17]='17'
contents[18]='18'
contents[19]='19'
contents[20]='20'

var spacing="<br />"

var the_one
var z=0

while (z<contents.length){
the_one=Math.floor(Math.random()*contents.length)
if (contents[the_one]!="_selected!"){
document.write(contents[the_one]+spacing)
contents[the_one]="_selected!"
z++
}
}

Answer 1

调整如下：

 const c = [1,2,3].map(ele => Math.floor(Math.random() * 216)); 
 document.write(`<span style="color: rgb(${c.join(",")});">${contents[the_one]+spacing}<span>`);

参见示例：

var contents = new Array()
contents[0] = '0'
contents[1] = '1'
contents[2] = '2'
contents[3] = '3'
contents[4] = '4'
contents[5] = '5'
contents[6] = '6'
contents[7] = '7'
contents[8] = '8'
contents[9] = '9'
contents[10] = '10'
contents[11] = '11'
contents[12] = '12'
contents[13] = '13'
contents[14] = '14'
contents[15] = '15'
contents[16] = '16'
contents[17] = '17'
contents[18] = '18'
contents[19] = '19'
contents[20] = '20'

var spacing = "<br />"

var the_one
var z = 0

while (z < contents.length) {
  the_one = Math.floor(Math.random() * contents.length)
  if (contents[the_one] != "_selected!") {
    const c = [1,2,3].map(ele => Math.floor(Math.random() * 216)); 
    document.write(`<span style="color: rgb(${c.join(",")});">${contents[the_one]+spacing}<span>`);
    contents[the_one] = "_selected!"
    z++
  }
}

Answer 2

编辑：重新阅读问题，它有不同的需求。但我将把这个答案留在这里，因为它解释了如何在 JavaScript 中获得随机颜色（实际主题）。

以下是创建随机十六进制颜色值所需的函数：

const getRandomHex = () => Math.floor(Math.random() * 256).toString(16).padStart(2, '0');

const getRandomRGB = ({R = getRandomHex(), G = getRandomHex(), B = getRandomHex(), A } = {}) => ['#', R, G, B, A].join('');

console.log(getRandomRGB());
console.log(getRandomRGB({ A: '00' }));

第一个函数getRandomHex 将随机 (0-255) 数值转换为 Base16 即十六进制字符串。如有必要，在前面添加一个额外的零。

主函数getRandomRGB 会将三个（红、绿、蓝）值附加到数组中，然后将数组作为单个字符串连接起来。

此外，您可以覆盖 R/G/B（和 Alpha 通道）值作为传递的属性。

我选择这种方法的原因很简单，它允许在需要时操纵生成的 R/G/B 值（例如在用例中：“保持‘红色值’静态 - 而绿色和蓝色值是随机的”）。