Javascript 创建程序化颜色选择器

如何创建一个确定性Javascript HTML颜色选择器，给定所需颜色的参数将返回一个HTML十六进制颜色代码数组，即：

    function createColours(numColours) {
        return [/* colours array of size numColours */]     
    }

颜色本身可以随机选择/生成，但该方法必须确保在调用之间选择的颜色始终相同，并且在序列中始终以相同的顺序

例如，如果功能决定的颜色系列以以下8开始：

    "#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00", "#795800", "#FFD245", "#6EFFAD", etc, etc

该函数将在客户端上的不同方法调用中执行以下一致响应

    ["#47092E", "#CC2A43"] == createColours(2);
    ["#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00"] == createColours(5);
    ["#47092E"] == createColours(1);        
    ["#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00", "#795800", "#FFD245", "#6EFFAD", #and 49 others#] == createColours(57);     

注意：颜色未预先定义为变量；该方法可能需要345种颜色，所有这些颜色都需要通过任何合适的方式生成

要解决的问题是-首先是-您如何在方法中创建一种能力，以在每次都一致地生成n个十六进制颜色值，同时保持序列

可能是这样的：

function createColours(numColours){
   var all  = ["#47092E", "#CC2A43", "#00C66B", .... ];
   var selected = [];
   for(var i=0;i<numColours;i++){
     selected.push(all[i]);
   }
   return selected;
}

函数createColor（numColor）{
var all=[“#47092E”、“#CC2A43”、“#00C66B”、…]；
所选var=[]；
对于（var i=0；i请参见此。它描述了javascript中的所有函数实际上是如何成为对象的

下面是一个快速原型：

function createColours(num) {
  if ( typeof createColors.colors == 'undefined' ) {
    // We've not yet created any colors...
    createColors.colors = new array();
   }
  if ( createColors.colors.length >= num ) {
     // Create new colors and add them to the array here...

  }
  // Otherwise, return the array...
  return createColors.colors;
}

我会这样做的

(function(){
var colours = [];
var x = "0123456789ABCDEF".split('');
var addColour = function() {
  var s='#';
  for(var i=6; i-->0;)
    s+=x[Math.round(Math.random()*15)];
  colours.push(s);
};
createColours = function(numColours) {
  for(var i=numColours-colours.length; i-->0;) addColour();
  return colours.slice(0,numColours);
}
})();

每对十六进制颜色表示一个RGB值。给定#AABBCC，可以推断AA表示红色，BB表示绿色，CC表示蓝色。要获得红色的“值”，首先需要将a从十六进制转换为十进制格式

A表示十进制的10。当您将十六进制颜色的值对相乘时，您将得到RBG的每个值。
因此，当您将前面提到的十六进制颜色转换为RGB时，您将得到红色=AA、绿色=BB和蓝色=C*C或红色=10*10=100、绿色=11*11=121和蓝色=12*12=144

因此#AABBCC是（100121144）的RGB。
我认为这应该足以扭转这一过程……因为您不需要每种颜色长度超过2个十六进制字符的十六进制值，您也不需要一种奇特的算法来将十进制转换为十六进制并返回。RGB仅从0到255，因此您可以使用内置函数或通过根据页面上的资源制作表格：

您需要使用具有固定起始种子的伪随机数生成器（PRNG）。javascript中的Math.random方法是PRNG，但您不能像在其他语言中那样设置种子

PRNG创建起来相当简单——在互联网上有很多代码。给定一个固定的起始种子，它总是会生成相同的随机数序列，这就是你想要的

无论那些颜色看起来好看与否，都是

一个具有种子设定功能的javascript实现：


您还可以在这里找到C实现（易于转换为javascript）和构建自己的Lehmer类型PRNG的其他详细信息：


另一个代码为（）：


这个问题涉及javascript中的几种PRNG类型：


如果在函数开始时为PRNG提供相同的起始种子，则每次连续调用都将返回相同的数字序列

把这个数字转换成一种颜色，你就万事大吉了

-Adam
使用上面提供的答案和RNG代码，我得到了（假设使用库创建类）：

var colorpicker=Class.create({
初始化：函数（）{
this.hash='#'；
this.rngRed=new RNG（5872323）；//使用相同的种子总是保证数字顺序响应相同
this.rngGreen=新的RNG（332233）；
this.rngBlue=新RNG（3442178）；
},
numberToHex：函数（数字、填充）{
var hex=数字toString（16）；
返回十六进制；
},
createColours：函数（numColours）{
var颜色=[]；
对于（var i=numColours-colors.length；i-->0；）{
var r=本次.rngRed.nextRange（5240）；
var g=this.rngGreen.nextRange（10250）；
var b=此.rngBlue.nextRange（0230）；
按（this.hash+this.numberToHex（r）+this.numberToHex（g）+this.numberToHex（b））；
}
返回颜色；
}
});
var colorPicker=新的colorPicker（）；
var COLORS=颜色选择器。CreateColors（10）；
对于（变量i=0；i
这没有抓住要点。我不是在定义数组“all”…如果我有数百种颜色，我希望该方法自己生成十六进制代码。如果它们是常量，我就没有理由设置问题：）谢谢，我知道你关于函数和对象的观点。你的解决方案没有解决使用某种准随机方法通过十六进制值生成N种颜色的主要问题。你的解决方案提供的只是数组处理。啊，对不起，我假设更大的问题是保持相同的结果集，而不是生成随机内容。…有趣..将给它一个旋转谢谢。尝试了一下；每次调用都会生成完全随机的颜色，与上次调用不同，并且还会生成十六进制值，这些值对于颜色是不合法的。与PRNG答案结合使用时可供参考
    var ColourPicker = Class.create({
        initialize: function() {
            this.hash = '#';
            this.rngRed = new RNG(5872323); // using same seed always guarantees number order response same
            this.rngGreen = new RNG(332233);
            this.rngBlue = new RNG(3442178);
        },
        numberToHex: function(number, padding) {
            var hex = number.toString(16);
            return hex;
        },
        createColours: function(numColours) {
            var colours = [];
            for (var i = numColours - colours.length; i-- > 0;) {
                var r = this.rngRed.nextRange(5,240);
                var g = this.rngGreen.nextRange(10,250);
                var b = this.rngBlue.nextRange(0,230);
                colours.push(this.hash + this.numberToHex(r) + this.numberToHex(g) + this.numberToHex(b));
            }
            return colours;
        }
    });

    var colourPicker = new ColourPicker();
    var colours = colourPicker.createColours(10);

    for (var i = 0 ; i < colours.length ; i++) {
        alert(colours[i]);
    }