Question

我的网站有不同的消息框。这些盒子的头部应始终具有不同的随机颜色。为了防止彼此相邻的消息具有相同的颜色，我使用splice从数组colors中删除使用的颜色。在某些时候，数组colors将为空，这就是为什么剩下的框将没有颜色。如何“重新填充”数组，以便每个元素都有一个随机颜色？

这是我的页面：http://www.tdvk.de/。黄色是默认的头部颜色。

function selectColor() {
    var random = Math.floor(Math.random() * colors.length);
    return colors.splice( random, 1 )[0];
}

var colors = [ "rgb(199, 179, 78)", "rgb(127, 195, 133)", "rgb(102, 169, 162)", "rgb(132, 122, 224)" ];

var i = 0;

while ( i != colors.length ) {
    $( "tr" ).each(function(i) {
        var head = $( ".msgHead", this );
        head.css( "background-color", selectColor() );
        i++;
    });
}

if { i = colors.length ) {
    /* reset array and continue */
}

Answer 1

如何使用相同颜色重新填充：

if ( i = colors.length ) {
    colors = [ "rgb(199, 179, 78)", "rgb(127, 195, 133)", "rgb(102, 169, 162)", "rgb(132, 122, 224)" ];
}

但正如其他人所建议的那样，还有其他方法可以做到这一点，比如再次绕回第一个元素而不是拼接，或随机化哪些值。

Answer 2

而不是使用splice，为什么不迭代它们？

var selectedColorIndex = Math.round(Math.random() * colors.length);
function selectColor() {
    var random = Math.floor(Math.random() * colors.length);
    return colors[selectedColorIndex];
}

编辑：现在将选择一个随机元素。

Answer 3

你的问题是遗漏了一些重要的细节，但我认为你要做的是继续从数组中选择随机颜色，在你使用每种颜色和之前不重复任何值然后开始重复。

可能你最好的解决方案可能是从原始阵列的Fisher-Yates shuffle开始，然后依次选择每种颜色，直到你到达最后一种颜色。然后简单地重新洗牌并从头开始。

所以在伪代码中，你有类似的东西：

shuffleArray
colorIndex = 0; 

while still selecting colors
    select color at array[colorIndex]
    colorIndex++
    if (colorIndex > array.length)
        colorIndex = 0;
        shuffleArray

例如：

＆＃13;

  // from http://bost.ocks.org/mike/shuffle/

  function shuffle(array) {
    var m = array.length,
      t, i;

    // While there remain elements to shuffle…
    while (m) {

      // Pick a remaining element…
      i = Math.floor(Math.random() * m--);

      // And swap it with the current element.
      t = array[m];
      array[m] = array[i];
      array[i] = t;
    }

    return array;
  }

var colorIndex = 0;
var colors = ["rgb(199, 179, 78)", "rgb(127, 195, 133)", "rgb(102, 169, 162)", "rgb(132, 122, 224)"];

var i = 0;

shuffle(colors);
while (i < 8) { 
  alert(colors[colorIndex++]);
  i++;
  if (colorIndex >= colors.length) {
    shuffle(colors);
    colorIndex = 0;
  }
}

＆＃13;

请注意还有一件事需要考虑。无论你如何做到这一点，都有可能从你的＆＃34;重新填充＆＃34;中选择第一个元素。 array将与上一个循环中的最后一个元素相同。您可能想要考虑如何处理这种情况。

Answer 4

您可以动态生成颜色组合，而不是硬编码颜色组合

    var usedColors = []

    function randomDigit( max ){
        return Math.floor( Math.random() * max )
    }

    function getNewColor(){
        var max = 255
        var r = randomDigit( max )
        var g = randomDigit( max )
        var b = randomDigit( max )
        if ( !colorUsed( r, g, b ) ) return storeColor( r, g, b )
        else return getNewColor()
    }

    function storeColor( r, g, b ){
        usedColors[ r + "," + g + "," + b ] = true
        return [ r, g, b ]
    }

    function colorUsed(r,g,b){
        return usedColors[ r + "," + g + "," + b ]
    }

    var newColor = getNewColor()

或者如果您希望预定义

    function shuffle(o){
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

    var colors = [ "rgb(199, 179, 78)", "rgb(127, 195, 133)", "rgb(102, 169, 162)", "rgb(132, 122, 224)" ]

    function getColors(boxCount){
        var colorArr = []

        var fullIterations = Math.floor( boxCount / colors.length )

        var lastIteration = boxCount - fullIterations * colors.length

        for(var x = 0; x < fullIterations; x++){
            for(var i = 0; i < colors.length; i++){ var color = colors[ i ]; colorArr.push(color);  }
            colors = shuffle( colors )
        }

        for(var x = 0; x < lastIteration; x++){ var color = colors[ x ]; colorArr.push(color);  }

        colors = shuffle( colors )

        return colorArr
    }

    var newColors = getColors(20)

Answer 5

鉴于您的盒子是从上到下排序的。为什么不通过确保前一个框（上图）的颜色与当前框不同来选择随机颜色。例如：

// remove splice from selectColor, the only thing selectColor needs to do now is select a random color from your list.

var previousColor = null;
$("tr").each(function (element) {
    // select random color
    var color = selectColor();
    // make sure it is different than previous color
    while (color === previousColor) selectColor();

    // ...
    // set element color
    // ...

    // make sure next element is different
    previousColor = color;
});

＆＃34;笔芯＆＃34;数组

5 个答案: