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的：隨機背景顏色

回答

相關問題