js随机生成颜色

最新推荐文章于 2024-06-06 15:28:56 发布

EstherNi

最新推荐文章于 2024-06-06 15:28:56 发布

阅读量304

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/EstherNi/article/details/139500277

版权

//随机生成多个rgba的颜色值，如['11, 233, 184', '227, 118, 58']
function generateRandomColors(num) {
  var colors = []; // 存放生成的颜色数组
  for (var i = 0; i < num; i++) {
    var red = Math.floor(Math.random() * 256); // 红色分量范围为[0-255]
    var green = Math.floor(Math.random() * 256); // 绿色分量范围为[0-255]
    var blue = Math.floor(Math.random() * 256); // 蓝色分量范围为[0-255]
    var color = red + ", " + green + ", " + blue; // 将RGB值转换为字符串形式表示颜色
    if (!colors.includes(color)) {
      // 判断该颜色是否已经在数组中存在
      colors.push(color); // 如果没有重复则添加到数组中
    } else {
      i--; // 若发现了重复颜色，则需要再次生成新的颜色
    }
  }
  return colors;
}
//使用：
generateRandomColors(2)

//随机生成16进制的颜色值，如['#203098', '#12a075'] 
function generateRandomHexColor(num) {
  var colors = []; // 存放生成的颜色数组
  for (var i = 0; i < num; i++) {
    var hex = Math.floor(Math.random() * 16777216).toString(16);
    //生成ffffff以内16进制数
    while (hex.length < 6) {
      //while循环判断hex位数，少于6位前面加0凑够6位
      hex = "0" + hex;
    }
    var color = "#" + hex; // 将RGB值转换为字符串形式表示颜色
    if (!colors.includes(color)) {
      // 判断该颜色是否已经在数组中存在
      colors.push(color); // 如果没有重复则添加到数组中
    } else {
      i--; // 若发现了重复颜色，则需要再次生成新的颜色
    }
  }
  return colors;
}
//使用：
generateRandomHexColor(2)