随机颜色jQuery的盒子

我的问题是：我有一个颜色的列表，jQuery的用来为我的HTML中的盒子div选择一个随机的颜色。如果你点击“随机我”按钮，一切正常，并为每个方块挑选随机颜色。但是，我想确保相邻的方块不会得到相同的颜色（即方形1的颜色=黑色，方形2的颜色=红色，方形3的颜色=黄色，方形4的颜色=紫色）。我希望每个Square都有自己独特的颜色，从20种颜色的泳池中选择。所以我不想要红色，红色，黄色，紫色或红色，黄色，红色，紫色等。随机颜色jQuery的盒子

以下是我所有的代码（添加了CSS作为样式元素的HTML）和（添加了jQuery在结束标签前的页面底部）。

你们真棒。预先感谢您的帮助。 Jason

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Square Test</title> 

    <!-- CSS styles --> 
    <style> 
     .nw{background: #f09; top: 0; left: 0; right: 50%; bottom: 50%} 

     .ne{background: #f90; top: 0; left: 50%; right: 0; bottom: 50%} 

     .sw{background: #009; top: 50%; left: 0; right: 50%; bottom: 0} 

     .se{background: #090; top: 50%; left: 50%; right: 0; bottom: 0} 

     html, body{width: 100%; height: 100%; padding: 0; margin: 0} 

     div{position: absolute; padding: 1em; border: 1px solid #000} 

     div { 
      -webkit-box-sixing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
     } 

     #question { 
      position: absolute; 
      top: 44%; 
      left: 37%; 
      bottom: 50%; 
      color: red; 
      width: 30%; 
      height: 5%; 
      background-color: #fff; 
      border: 3px solid black; 
      text-align: center; 
      font-size: 24px; 
      border-radius: 30px; 
     } 

     #square1 { 
      position: absolute; 
      top: 20%; 
      left: 20%; 
      color: #fff; 
      font-weight: bold; 
      font-size: 24px; 
     } 

     #square2 { 
      position: absolute; 
      top: 20%; 
      left: 70%; 
      color: #fff; 
      font-weight: bold; 
      font-size: 24px; 
     } 

     #square3 { 
      position: absolute; 
      top: 70%; 
      left: 20%; 
      color: #fff; 
      font-weight: bold; 
      font-size: 24px; 
     } 

     #square4 { 
      position: absolute; 
      top: 70%; 
      left: 70%; 
      color: #fff; 
      font-weight: bold; 
      font-size: 24px; 
     } 
    </style> 
</head> 

<body> 

    <!-- the divs that the jQuery acts on --> 
    <div onclick="change_color(1)" id="div_color_1" class="nw change_color" style="background-color: rgb(224, 216, 200);"> 
    </div> 

    <div onclick="change_color(2)" id="div_color_2" class="ne change_color" style="background-color: rgb(94, 198, 49);"> 
    </div> 

    <div onclick="change_color(3)" id="div_color_3" class="sw change_color" style="background-color: rgb(84, 51, 38);"> 
    </div> 

    <div onclick="change_color(4)" id="div_color_4" class="se change_color" style="background-color: rgb(169, 215, 220);"> 
    </div> 

    <!-- Random me button that selects a random color for each square --> 
    <input id="question" type="button" onclick="colorfy_me()" value="Random me"> 

     <!-- the squares --> 
     <p id="square1">Square 1</p> 

     <p id="square2">>Square 2</p> 

     <p id="square3">>Square 3</p> 

     <p id="square4">>Square 4</p> 

<!-- jQuery scripts --> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    var myColors = [ 
     '#7F8C8D', '#95A5A6', '#BDC3C7', '#003946', '#BDC3C7', 
     '#ECF0F1', '#BDC3C7', '#ECF0F1', '#C0392B', '#E74C3C', 
     '#D35400', '#E67E22', '#F39C12', '#F1C40F', '#22313f', 
     '#2C3E50', '#34495E', '#8E44AD', '#9B59B6', '#2980B9', 
     '#3498DB', '#27AE60', '#2ECC71', '#16A085' 
    ]; 

    $(function(){ 
     $.each(myColors, function(i, v){ 
      $('#div_color' + (+i + 1)).css('background-color', v); 
     }) 

    }) 

    function colorfy_me() { 

     var colors = {}; 
      $.each(myColors, function(i, v){ 
      colors[i] = 0; 
     }) 

     $('div.change_color').each(function() { 
      var color = Math.floor(Math.random() * myColors.length); 
      $(this).css('background-color', myColors[color]); 
      colors[color] = colors[color] + 1; 
     }); 

     $.each(colors, function(i, v){ 
      $('#div_color' + (+i + 1)).html(colors[i]) 
     }); 
    } 
    </script> 

</body> 
</html>

来源

2014-03-05 Jason Keith McCoy

为什么不使用从主文件复制的颜色数组，每次选择颜色时，都会从数组中取出颜色，调整工作颜色数组，从而使颜色不可用。 – alexmac

alexmac，你能解释还是告诉我该怎么做？ –

好吧，你有一个主要的数组说：var colors = [“DeepPink”，“OrangeRed”，“Gold”，“RosyBrown”，“Maroon”，“cyan”，“teal”，“navy”，“slateblue”青灰“];然后你可以制作一份副本，并使用它根据长度随机选择数字。然后选择一个元素，然后从工作阵列中删除该元素，重新绘制窗口只需将您的工作阵列重置为主并重做随机颜色。 - 对不起，有一个完整的例子有点忙。 – alexmac

这个版本的color_me实现了alexmac试图描述的算法。它在去除副本中的每种颜色时会使缩小的颜色数组仅包含未使用的颜色。

colorfy_me = function() { 
    var colors = myColors.slice(0) 

    $('div.change_color').each(function() { 
     // find a random color that's not already used. 
     var color = Math.floor(Math.random() * colors.length); 
     $(this).css('background-color', colors[color]); 
     $(this).html(colors[color]) 
     colors = colors.slice(0,color-1).concat( 
      colors.slice(color+1,colors.length-1)) 
    }); 

    $.each(colors, function(i, v){ 
     $('#div_color_' + (+i + 1)).html(colors[i]) 
    }); 
}

您的代码还存在其他一些问题，所以我必须做一些更改。请参阅http://jsfiddle.net/cQB38/1/

上的工作示例仅定义唯一的颜色，这很棘手。一种选择是将你的颜色分成4组相似的颜色，然后从4组中随机抽取一种颜色。我认为通过比较它们各自的红色，绿色和蓝色成分之间的差异，可以确定不同的两种颜色是多么的可能，但这听起来很复杂。

来源

2014-03-05 02:58:39

谢谢你，你的建议Dan Farrell似乎工作得最好。我唯一不知道的是如何停止在页面上的文本中打印十六进制代码？我确信这很简单 –

哦，我以为你想要:)这是通过'$（this）.html（colors [color]） ' –

分配myColors到一个临时数组，并得到从临时数组的背景色配色则采用拼接方法

改变你的colorfy_me（），如下面的删除临时阵列的颜色和尝试

function colorfy_me() { 

     var colors = {}; 
      $.each(myColors, function(i, v){ 
      colors[i] = 0; 
     }) 
     testColor=myColors; 
     $('div.change_color').each(function() { 
      var color = Math.floor(Math.random() * myColors.length); 
      $(this).css('background-color', testColor[color]);   
      testColor.splice(color,1); 
      colors[color] = colors[color] + 1; 
     }); 

     $.each(colors, function(i, v){ 
      $('#div_color' + (+i + 1)).html(colors[i]) 
     }); 
    }

来源

2014-03-05 03:12:45 Sarath

随机颜色jQuery的盒子

回答

相关问题