javascript - 使用javascript分配随机选择的颜色

Question

我的页面中有一个网格，我想通过 javascript 填充 200 个元素。填充 .grid 元素的实际代码如下:

$(function () {
  var $gd = $(".grid");

  var blocks="";
  for(i=0; i < 200; i++){
    blocks += '<div class="block"></div>';
  }
  $gd.append(blocks);
});

我现在要做的是为每个创建的元素分配一个从列表中随机选取的颜色。让我们说红色，蓝色，黄色，绿色(出乎意料，嗯？)。我希望这些值是尽可能随机的，同时也避免相同的颜色被相应地再次选择两次(只是为了清楚起见，可以像 red-blue-red-green-blue 等等，不是 red-red-green-yellow)。

也许这有助于随机化过程，Fisher–Yates Shuffle ，但我不知道如何实现上述非两次相邻规则(如果可以应用的话)。

实现此结果的最佳方法是什么？我还想知道我是否可以对每个 .block 应用渐变而不是扁平的十六进制颜色；我想更好的方法是为渐变等在 CSS 中映射的每个元素分配一个随机类。

如果上述脚本可以在性能方面进行优化，我很感激任何建议!

附加信息:

• 我正在使用 jQuery
• 网格由每行 20 个元素组成，共 10 行
• 颜色应该是 4 种，但如果有帮助，可以增加到 5-7 种中性灰色调

这里有一支笔可以用来做实验 http://codepen.io/Gruber/pen/lDxBw/

额外功能请求:如上所述，我想避免重复的相邻颜色。是否也可以“上下”避免这种情况？我想完全避免这种情况即使不是不可能也是非常困难的，但是如果有人能找到解决方案那就太棒了! 像这样，“nope”标记元素被阻止，而“yep”对 Angular 线标记被允许:

Answer 1

$(function () {
  var colors = ["red","blue","green","yellow"];
  var $gd = $(".grid");
  var previousColor;
  var blocks="";
  for(i=0; i < 200; i++){
    var color = "";
    while(color === previousColor) {
        color= colors [Math.floor(Math.random()*colors .length)];
    }
    blocks += '<div class="block" style="color:' + color + '"></div>';
    previousColor = color;
  }
  $gd.append(blocks);
});