Question

如何创建一个 确定性 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个HEX颜色值

Answer 1

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

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

这些颜色看起来是否令人愉悦，是another question entirely ...

一种具有播种功能的javascript实现：
http://www.erikoest.dk/rng2.htm

您还可以在这里找到C实现（易于转换为javascript）以及构建自己的Lehmer类型PRNG的其他细节：
http://www.google.com/search?q=Lehmer%20random%20number%20generator

另一个代码（Mersenne twister）：
http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/VERSIONS/JAVASCRIPT/java-script.html

这个问题涵盖javascript中几种类型的PRNG：
Seedable JavaScript random number generator

如果您在函数开头向PRNG提供相同的起始种子，则每次连续调用时它将始终返回相同的数字序列。

将该数字转换为颜色，然后就完成了设置。

- 亚当

Answer 2

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

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

所以#AABBCC是（100,121,144）的RGB。我认为应该有足够的信息来反转这个过程...因为你不需要每种颜色长度超过2个十六进制字符的十六进制值，你不需要花哨的算法来将Decimal转换为十六进制然后回来。 RGB仅从0到255，因此您可以使用内置函数在基数之间进行转换，也可以通过从页面上的资源创建表来进行转换：

Wikipedia page for Hexidecmal

Answer 3

使用上面提供的答案和RNG代码here，我最终得到了（假设使用Prototype库来创建类）：

    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]);
    }

Answer 4

我就是这样做的。

(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);
}
})();

Answer 5

也许这个：

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

Answer 6

见article。它描述了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;
}

创建程序化颜色选择器

6 个答案: