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

问题描述 投票：0回答：4

我只想出这个

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'>e。非常有帮助

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

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

......

jquery random colors
4个回答
0
投票

在您的代码中有一些引用错误，您尝试此代码

$(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);
                      })
            })
0
投票

有一堆拼写错误，除了它的工作原理：

  • 在'#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的答案

0
投票

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

希望你这样想。

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;
            }
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;
}
<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>
0
投票

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

$(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);
})
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.