應用於頁面元素的數組中的隨機顏色

Question

我有一個元素列表，它們都需要從顏色數組中應用於它們的隨機背景顏色。

我的HTML結構很簡單：

<ul class="moreorless-list"> 
    <li><span>Word</span></li> 
    <li><span>Word</span></li> 
    <li><span>Word</span></li> 
    <li><span>Word</span></li> 
    <li><span>Word</span></li> 
    <li><span>Word</span></li> 
</ul> 

例如，一個顏色數組可以是：#FFFFFF，＃111111，＃222222，＃333333等

我需要的顏色從數組中隨機應用它們到列表中;這當然意味着有些顏色重複兩次就沒有問題。

任何想法我怎麼能做到這一點？ PHP或JS是首選。

Answer 1

$('li').each(function() { 
    $(this).css('background-color', random()); 
}); 

function random() { 
    colors = ['red', 'white', 'blue', 'green'] 
    return colors[Math.floor(Math.random() * colors.length)]; 
} 

Answer 2

試試這個：

function get_random_color() { 
    function c() { 
     return rand_num(256).toString(16); 
     } 
     return "#"+c()+c()+c(); 
     } 

Answer 3

如果你有一臺彩色的使用：

$colors = array("#FFFFFF", "#000000", "#333333"); 
$rand_keys = array_rand($colors); 

Answer 4

試試這個：

function getRandomColor(colorArray) 
{ 
    return colorArray[Math.floor(Math.random()*colorArray.length)]; 
} 

Answer 5

我傾向於建議：

var options = ['#ffffff', '#111111', '#222222', '#333333']; 

function randomColour(el, colours){ 
    return colours[Math.floor(Math.random()*colours.length)]; 
} 

var spans = document.getElementsByTagName('span'); 
for (var i = 0, len = spans.length; i<len; i++){ 
    spans[i].style.backgroundColor = randomColour(this,options); 
} 

JS Fiddle demo。

Answer 6

基本上你需要獲得一個隨機值了數組。在PHP中，您可以使用array_rand（http://php.net/manual/en/function.array-rand.php）來實現此目的。一個aproach可能看起來像這樣：

<?php 
    function randomColor() { 
     $colorArray = array('#ffffff', '#111111', '#222222', '#333333', ...); 
     return $colorArray[array_rand($colorArray)]; // array_rand() only returns the key 
    } 
?> 

<ul class="moreorless-list"> 
    <li style="background-color:<?php echo randomColor(); ?>"><span>Word</span></li> 
    <li style="background-color:<?php echo randomColor(); ?>"><span>Word</span></li> 
    <li style="background-color:<?php echo randomColor(); ?>"><span>Word</span></li> 
    <li style="background-color:<?php echo randomColor(); ?>"><span>Word</span></li> 
    <!-- ... --> 
</ul>