Question

我只能想出这个

var colorsValues = {'#800000', '#A36386', '#FFD4D8, '#223CFF', '#F5FF5A', '#FF5555', '#A7EBFF'};
    var colors = varcolorsValues{Math.floor(Math.random() * colorsValues.length)};

但它没有做任何事情。我是用正确的方法吗？

我也试过这个。

 $(document).ready(function () {
  var back = ['#800000', '#A36386', '#FFD4D8, '#223cff', '#F5FF5A', '#FF5555', '#A7EBFF',];
  var rand = back[Math.floor(Math.random() * back.length)];
  $('div class='squareDivs'').css('background',rand);
})

两者都不能为我的<div class='squareDivs'>工作。非常有帮助欣赏

............................................... ...............

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script src="jquery.js"></script>
        <script src="myScript.js"></script>

        <style>
        body{font-size:30px;
        font-family: "Arial", "sans-serif";}

        table {
            margin-top:50px;
            background-color:white;
            border: 1px solid black;
            margin-left:auto; 
            margin-right:auto;
            width:50%
        }

        td {
            width: 700px;
            padding: 5px;
            border: 1px solid black;
        }

        .spanrows1,
        .spanrows2 {
             text-align: center;
        }  

        .spanrows1 {
            width: 400px;
        }

        .spanrows2 {
            width: 600px;
        }

        .span2rows {
            text-align: left;
        }

        .squareDivs {
            width:100px;
            height:100px;
            background-color:#000000;
            margin: 10px;
            border-radius: 10px;
            display: inline-block;
        }

        .squareTxt {
            line-height: 100px;
            vertical-align: middle;    
        }

        .alignTxt{text-align: center;}

        </style>
        </head>

        <body> 

            <div class="alignTxt"><span id="titleTxt"></span></div>

        <table>
        <tr>
             <td class='spanrows2'>
                <div class='squareDivs'><span class='squareTxt'></span></div>
                <div class='squareDivs'><span class='squareTxt'></span></div>
                <div class='squareDivs'><span class='squareTxt'></span></div>
                <div class='squareDivs'><span class='squareTxt'></span></div>
                <div class='squareDivs'><span class='squareTxt'></span></div>
                <div class='squareDivs'><span class='squareTxt'></span></div>
                <div class='squareDivs'><span class='squareTxt'></span></div>
                <div class='squareDivs'><span class='squareTxt'></span></div>
                <div class='squareDivs'><span class='squareTxt'></span></div>
            </td>
        </tr>
        </table>

        </body>
        </html>

...

Answer 1

在你的代码中有一些引用错误，你试试这段代码

$(document).ready(function () {
            var back = ['#800000', '#A36386', '#FFD4D8', '#223cff', '#F5FF5A', '#FF5555', '#A7EBFF',];
                      $('.squareDivs').each(function(){
                          var rand = back[Math.floor(Math.random() * back.length)];
                          jQuery(this).css('background', rand);
                      })
            })

Answer 2

您的代码中存在一些错误，请尝试以下方法：

$(document).ready(function () {
  var back = ['#800000', '#A36386', '#FFD4D8', '#223cff', '#F5FF5A', '#FF5555', '#A7EBFF'];
  var rand = back[Math.floor(Math.random() * back.length)];
  $('.squareDivs').css('background',rand);
})

Answer 3

除了它有效之外，还有一堆拼写错误：

'#FFD4D8
数组末尾有逗号
您的班级选择器只应包含班级名称'.squareDivs'，而不是'div class='squareDivs''

这是您的代码编译。所有div都具有相同的随机颜色

$(document).ready(function () {
  var back = ['#800000', '#A36386', '#FFD4D8', '#223cff', '#F5FF5A', '#FF5555', '#A7EBFF'];
  var rand = back[Math.floor(Math.random() * back.length)];
  $( '.squareDivs' ).css( 'background', rand );
});

如果您希望每个div有不同的颜色，请使用$('.squareDivs').each(function() {...})

查看 Bai Nguyen 的答案

Answer 4

您的代码中存在一些错误。在后退数组中，一种颜色缺少单引号。

希望你想这样。

＆＃13;

var back = ['#800000', '#A36386', '#FFD4D8', '#223cff', '#F5FF5A', '#FF5555', '#A7EBFF'];

            $('.squareDivs').each(function (e) {
                var ranColor = getRandomColor(back.length);
                $(this).css({
                    "backgroundColor": back[ranColor]
                });
            });

            // Return the random number including 
            // min & max number of array items
            function getRandomColor(numOfColors) {
                var min = 0; // Min length of array
                var max = numOfColors; // Color array length

                // Return random number
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

＆＃13;

body {
    font-size: 30px;
    font-family: "Arial", "sans-serif";
}

table {
    margin-top: 50px;
    background-color: white;
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    width: 50%
}

td {
    width: 700px;
    padding: 5px;
    border: 1px solid black;
}

.spanrows1,
.spanrows2 {
    text-align: center;
}

.spanrows1 {
    width: 400px;
}

.spanrows2 {
    width: 600px;
}

.span2rows {
    text-align: left;
}

.squareDivs {
    width: 100px;
    height: 100px;
    background-color: #000000;
    margin: 10px;
    border-radius: 10px;
    display: inline-block;
}

.squareTxt {
    line-height: 100px;
    vertical-align: middle;
}

.alignTxt {
    text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alignTxt">
        <span id="titleTxt"></span>
    </div>

    <table>
        <tr>
            <td class='spanrows2'>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
                <div class='squareDivs'>
                    <span class='squareTxt'></span>
                </div>
            </td>
        </tr>
    </table>

＆＃13;

如何通过我的JS文件从我预定的颜色集中添加随机颜色？

4 个答案: