我正在尝试使用 JavaScript 生成随机颜色代码

Posted 2023-02-16

【中文标题】我正在尝试使用 JavaScript 生成随机颜色代码

【英文标题】：I am trying to generate random color codes using JavaScript

【发布时间】：2020-11-27 13:52:16

【问题描述】：

我正在尝试生成随机颜色代码或一种基于颜色的代码。我对 javascript 和着色不太熟悉

到目前为止我收集的内容：

function getColors(len) 
  var colors = [];

  for (var i = 0; i < len; i++) 
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) 
      color += letters[Math.floor(Math.random() * 16)];
    
    colors.push(color);
  

  return colors;

谢谢

【问题讨论】：

你的内循环应该使用i以外的东西，考虑使用j，或者使用let而不是var

【参考方案1】：

如果我理解正确的话。试试下面的功能。如果您随机传递任何内容，它会返回颜色集合。但是如果你通过baseColor，它将根据basedColor 生成hue 一组颜色。 hue 定义的基色为：red,yellow,green,cyan,blue & magenta。

用法

示例：1 - getRandomColors(10) 或 getRandomColors(10,'random') 或 getRandomColors(10,'anything besides Hue')

结果：//(10) ["#C4AD05", "#B63DCB", "#22A9FE", "#59DCAC", "#986FFD", "#493E56", "#49693D", "#83029A", "#59E3C0", "#C6FB84"]

示例：2 - getRandomColors(10,'blue') //baseColor

结果：//(10) ["hsl(240, 79%, 19%)", "hsl(240, 44%, 45%)", "hsl(240, 13%, 64%)", "hsl(240, 63%, 73%)", "hsl(240, 52%, 45%)", "hsl(240, 61%, 83%)", "hsl(240, 46%, 58%)", "hsl(240, 35%, 6%)", "hsl(240, 89%, 89%)", "hsl(240, 76%, 97%)"]

代码

function getRandomColors(len, baseColor = 'random') 
        var colors = [];
        var baseValue = getColorValue(baseColor);
        var execFn = getExecFn(baseValue);

        for (var i = 0; i < len; i++) 
            colors.push(execFn());
        

        return colors;

        function getExecFn(baseColorValue) 
            if (baseColorValue == -1) 
                return getRandomColor;
            
            else 
                return hueSet;
            
        

        function hueSet() 
            h = baseValue;
            s = Math.floor(Math.random() * 100);
            l = Math.floor(Math.random() * 100);
            return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
        

        function getRandomColor() 
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) 
                color += letters[Math.floor(Math.random() * 16)];
            
            return color;
        

        function getColorValue(baseColor) 
            switch (baseColor.toLowerCase()) 
                case 'red':
                    return 0;
                case 'yellow':
                    return 60;
                case 'green':
                    return 120;
                case 'cyan':
                    return 180;
                case 'blue':
                    return 240;
                case 'magenta':
                    return 300;
                default:
                    return -1;
            
        
    

【讨论】：

这正是我想要的，也是我发布问题时的想法，但由于我缺乏技术，无法思考太多......谢谢伙计...... :)

【参考方案2】：

就我而言，我的成绩如下：

var RGBColor1 = Math.floor(Math.random() * Math.floor(255));
var RGBColor2 = Math.floor(Math.random() * Math.floor(255));
var RGBColor3 = Math.floor(Math.random() * Math.floor(255));
colors.push(RGBColor1);
colors.push(RGBColor2)
colors.push(RGBColor3)

你可以做一个循环来更快

【讨论】：

Math.floor(255)? :)

以 MDN 为例：developer.mozilla.org/fr/docs/Web/JavaScript/Reference/…

@MaximeROGOGINE 用于处理浮点数等作为输入。既然你知道255，你就不需要地板了

这不是假的！ ¯_(ツ)_/¯

是的，它不会破坏任何东西，但似乎毫无意义。就像在做255 * 1一样，没有意义