应用于页面元素的数组中的随机颜色

我有一个元素列表，它们都需要从颜色数组中应用于它们的随机背景颜色。应用于页面元素的数组中的随机颜色

我的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是首选。

来源

2013-03-07 John the Painter

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

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

来源

2013-03-07 10:45:43

这里是小提琴http://jsfiddle.net/cpeeyush/sjchf/ – Peeyush 2013-03-07 10:51:01

试试这个：

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

来源

2013-03-07 10:38:44 Amrendra

然而，我有一组颜色我想要使用。非常感谢。 – 2013-03-07 10:41:56

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

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

来源

2013-03-07 10:43:24 Kabir

试试这个：

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

来源

2013-03-07 10:44:12 Manatok

我倾向于建议：

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。

来源

2013-03-07 10:49:54

基本上你需要获得一个随机值了数组。在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>

来源

2013-03-07 10:57:32 thormeier

应用于页面元素的数组中的随机颜色

回答

相关问题