个人中心
gpt4 book ai didi

javascript - 随机颜色 jquery 框

转载 作者：行者123 更新时间：2023-11-28 11:07:13 26 4
gpt4 key购买 nike

我的问题是:我有一个颜色列表，jquery 使用它为我的 HTML 中的框 div 选择随机颜色。如果你点击“Random me”按钮，一切正常，每个方 block 都会随机选择颜色。但是，我想确保相邻的方 block 颜色不同(即方 block 1 颜色 = 黑色，方 block 2 颜色 = 红色，方 block 3 颜色 = 黄色，方 block 4 颜色 = 紫色)。我希望每个 Square 都有自己独特的颜色，这些颜色是从 20 种颜色中选出的。所以我不要红、红、黄、紫或红、黄、红、紫等。

下面是我的所有代码(在头部添加 CSS 作为样式元素的 HTML)和(在页面底部添加的 jQuery，就在结束 body 标记之前)。

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

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

最佳答案

这个版本的 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 组中的每组中随机抽取一种颜色。我认为根据比较它们各自的红色、绿色和蓝色分量之间的差异和总和，可能可以确定两种颜色的不同程度，但这听起来很复杂。

关于javascript - 随机颜色 jquery 框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22187227/

26 4 0
文章推荐： css - Bootstrap 3 中的 Google map 崩溃问题
文章推荐： css - 限制背景滑过屏幕的最左边缘
文章推荐： css - Bootstrap 3 可折叠不工作
文章推荐： css - 为什么不使用 CSS 复选框作为切换按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com