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

【问题标题】：Random colours from array applied to elements on page数组中的随机颜色应用于页面上的元素
【发布时间】：2013-02-22 12:23:03
【问题描述】：

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

我的 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。

【问题讨论】：

标签： php javascript jquery colors

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

不过，我有一组我想使用的颜色。到目前为止，谢谢。

【解决方案3】：

如果您有颜色集，请使用：

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

【讨论】：

【解决方案4】：

我倾向于建议：

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.

【讨论】：

【解决方案5】：

基本上，您需要从数组中获取随机值。在 PHP 中，您可以使用 array_rand (http://php.net/manual/en/function.array-rand.php) 来实现此目的。一种方法可能如下所示：

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

【讨论】：

【解决方案6】：

试试这个：

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

【讨论】：