生成指定数量的随机十六进制和RGB颜色的功能

Question

试图编写一个生成指定量的随机RGB或十六进制颜色的函数。它以“ RGB”或“ HEX”（类型），然后将“ N”（生成数量）作为参数，但是在运行代码时我会得到NAN。这是我写的：

function generateColors(type, n) {
    let result = ''
    var quantity = Number(n)
    if (type === 'rgb') {
        let num = Math.round(0xffffff * 
Math.random());
        let r = num >> 16
        let g = num >> 8 & 255
        let b = num & 255
    return ('rgb(' + r + ', ' + g + ', ' + b + ')') * quantity;
  } else if (type === 'hexa') {
        let hexDigits = '0123456789ABCDEF'
        let randomHex= []
        for (var i = 0; i < 6; i++) {
            randomHex += 
hexDigits.charAt(Math.floor(Math.random() * 
hexDigits.length));
    }
    return [randomHex] * quantity; 
  } else {
      console.log('type not applicable')
  }
  return result
}  
console.log(generateColors('rgb', 3))
console.log(generateColors('hexa', 3))

不确定我缺少什么，或者如果我应该做一个Switch语句，但是欢迎任何建议。

Answer 1

您将需要使用循环...

您可以在功能中循环n次。将输出推入结果并返回结果。它看起来像这样的东西：

function generateColors(type, n) {
  let result = [];
  for (let x = 0; x < n; x++) {
    if (type === "rgb") {
      let num = Math.round(0xffffff * Math.random());
      let r = num >> 16;
      let g = (num >> 8) & 255;
      let b = num & 255;
      result.push("rgb(" + r + ", " + g + ", " + b + ")");
    } else if (type === "hexa") {
      let hexDigits = "0123456789ABCDEF";
      let randomHex = "";
      for (var i = 0; i < 6; i++) {
        randomHex += hexDigits.charAt(
          Math.floor(Math.random() * hexDigits.length)
        );
      }
      result.push(randomHex);
    } else {
      console.log("type not applicable");
    }
  }
  return result;
}
console.log("rgb", generateColors("rgb", 3));
console.log("hex", generateColors("hexa", 3));

工作示例> - 不要忘记打开控制台;）

Answer 2

或者，略短：

function mulcol(n,hex){
 function rndcol(hex){
  let col=[1,2,3].map(v=>Math.floor(Math.random()*256).toString(hex?16:10).padStart(hex?2:1,"0"));
  return hex?`#${col.join("")}`:`rgb(${col.join(",")})`;
 }
 return [...Array(n)].map(v=>rndcol(hex));
}
 
console.log(mulcol(3)); // RGB output
console.log(mulcol(5,1));// hex output

Answer 3

const generateColors = (type, num) => {
    let hexChars = '0123456789abcdef'
    colors = []
    if(type=='rgb') {
        for (let i = 0; i < num; i++) {
            let newArr = []
            for (let i = 0; i < 3; i++) {
                let rand = Math.floor(Math.random()*256)
                newArr.push(rand)
            }
            let tostring = newArr.join(',')
            finalVal = `rgb(${tostring})`
            colors[i] = finalVal            
        }       
    } else if(type=='hex') {
        for (let i = 0; i < num; i++) {
            colors[i] = '#'
            for (let k = 0; k < 6; k++) {
                let a = Math.floor(Math.random()*hexChars.length) 
                colors[i] += hexChars[a]         
            }
        }
    }
    return colors      
}
console.log(generateColors('rgb',4))
console.log(generateColors('hex',4))

GenerateColors函数采用两个参数，类型和NUM。如果类型为“ RGB”，它将通过创建数量的数字来生成随机的RGB颜色，并将它们存储在数组中。

十六进制变量包含用于RGB颜色的十六进制字符，并且定义了空数组颜色以存储生成的颜色。

使用嵌套循环，该函数会生成NUM随机RGB颜色。每种颜色表示为三个值的数组（例如，[r，g，b]），其中颜色值（r，g，b）在0和255之间随机选择。

生成的R，G和B值被添加到称为Newarr的临时阵列中。

使用JOIN（）方法将Newarr数组连接在一起，并且所得的字符串存储在名为ToString的变量中。

最后，使用此tostring值，创建了FinalVal变量并格式化为“ RGB（R，G，B）”格式。

颜色数组中充满了最终视频值，该值表示生成的颜色，并且返回该数组。

如果类型为“十六进制”，则该功能会生成随机的十六进制颜色。它还生成NUM随机十六进制颜色，并将它们存储在颜色数组中。

颜色阵列被定义为存储生成的颜色，而十六进制变量包含用于六角形颜色的十六进制字符。

每种颜色都以“＃”符号开头，由六个十六进制字符组成。颜色值是使用十六进制中随机选择的字符创建的，并添加到颜色数组中。

生成的颜色被添加到颜色阵列中，该数组在末尾返回。

代码的输出将是“ RGB（R，G，B）”格式中的一组随机生成的RGB颜色，或者取决于“ #ABCDEF”格式中的一组随机生成的十六进制颜色，具体取决于指定的类型。