Question

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

以下是我的所有代码（在头部添加了CSS作为样式元素的HTML）和（在封面正文标记之前的页面底部添加了jQuery）。

你们真棒。在此先感谢您的帮助。杰森

<!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>

Answer 1

此版本的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组中的每一组中拉出一种随机颜色。我认为根据比较各个红色，绿色和蓝色组件之间的差异和总和，可能有可能确定两种颜色有多么不同，但这听起来很复杂。

Answer 2

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

随机颜色jquery框

2 个答案: