隨機顏色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的盒子

回答

相關問題