jQuery的：随机背景颜色

-2

我有以下背景颜色： #05668D, #028090, #00A896, #02C39A, #F0F3BD ... 页面加载后，如何让我与abc类中的每个元素有不同的背景颜色（可重复，随机），在顶部颜色之一。jQuery的：随机背景颜色

例：

<div class="asd"><div class="abc">...</div></div> 
<div class="asd"><div class="abc">...</div></div> 
<div class="asd"><div class="abc">...</div></div> 
<div class="asd"><div class="abc">...</div></div> 
<div class="asd"><div class="abc">...</div></div>

结果：

<div class="asd"><div class="abc" style="background-color:#05668D">...</div></div> 
<div class="asd"><div class="abc" style="background-color:#00A896">...</div></div> 
<div class="asd"><div class="abc" style="background-color:#028090">...</div></div> 
<div class="asd"><div class="abc" style="background-color:#00A896">...</div></div> 
<div class="asd"><div class="abc" style="background-color:#F0F3BD">...</div></div> 
...

来源

2016-10-22 LeTung

你尝试过这么远吗？你所要求的是太基本的东西。如果你知道什么是CSS，并且你知道*一些Javascript，你可以在1分钟内完成。此外，http://stackoverflow.com/questions/18820733/getting-a-random-background-color-in-javascript和http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript解释大部分。只是一个简单的谷歌搜索“JavaScript随机背景颜色”。 –

你可以看到答案[jQuery中的随机颜色]（http://stackoverflow.com/questions/20553036/random-color-in-jquery） –

您可以使用类似下面和jQuery的每个函数随机函数的颜色应用到的元素。

\t \t $(function(){ 
 
    
 
    function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
    }; 
 
    var colors = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD']; 
 
    $('.abc').each(function(index,el){ 
 
    var randomColorIndex = getRandomInt(0,colors.length-1); 
 
    $(el).css('background-color',colors[randomColorIndex]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="asd"><div class="abc">...</div></div> 
 
    <div class="asd"><div class="abc">...</div></div> 
 
    <div class="asd"><div class="abc">...</div></div> 
 
    <div class="asd"><div class="abc">...</div></div> 
 
    <div class="asd"><div class="abc">...</div></div>

你可以阅读都在这里：

jQuery的每个功能：https://api.jquery.com/each/

的Javascript随机函数：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

来源

2016-10-22 18:41:44 arnabkaycee

你必须遍历每个元素，然后分配background-color风格。

普通的JavaScript版本

var colorsArray = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD']; 
var divsArray = document.getElementsByClassName('abc'); 
var uniqueColorIndex = 0; 

for(var i=0; i < divsArray.length; i++){ 
uniqueColorIndex = Math.floor(Math.random() * (colorsArray.length - 0 + 1)); 
    divsArray[i].style['background-color'] = colorsArray[uniqueColorIndex]; 
};

其中，colorsArray都可能颜色代码。
uniqueColorIndex找到一个随机数的索引。 Source

链接jsFiddle

来源

2016-10-22 18:47:16

jQuery的：随机背景颜色

回答

相关问题