JS 生成随机颜色 - Javascript

在web开发中，有时需要用到随机颜色，比如给网页某个元素设置随机颜色等。本文介绍如何使用JavaScript来生成随机颜色。

方法一：使用Math.random()函数

function getRandColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
}

上述代码中，我们使用Math.random()函数得到0到1之间的随机小数，再乘以256得到0到255之间的随机整数，并存储在r、g、b变量中。最后，将r、g、b变量拼接成"rgb(r,g,b)"格式的字符串返回即可。

方法二：使用toString(16)函数

function getRandColor2() {
  var color = "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
  return color;
}

上述代码中，我们使用Math.random()函数得到0到1之间的随机小数，再乘以0xffffff得到0到0xffffff之间的随机整数。然后，使用toString(16)函数将该整数转换为16进制，并将前面的0省略，再拼接上"#"，得到颜色字符串。需要注意的是，这种方法生成的颜色有时可能会比较暗，需要根据实际情况选择。

方法三：使用hsl颜色模式

function getRandColor3() {
  var hue = Math.floor(Math.random() * 360);
  var saturation = Math.floor(Math.random() * 100);
  var lightness = Math.floor(Math.random() * 100);
  var color = "hsl(" + hue + "," + saturation + "%," + lightness + "%)";
  return color;
}

上述代码中，我们使用Math.random()函数得到0到1之间的随机小数，再乘以360、100分别得到0到360、0到100之间的随机整数，并存储在hue、saturation、lightness变量中。最后，将hue、saturation、lightness变量拼接成"hsl(hue,saturation%,lightness%)"格式的字符串返回即可。通过调整hue、saturation、lightness变量的值可以得到更鲜艳或更柔和的颜色。

以上三种方法都可以用来生成随机颜色，需要根据实际情况选择。