php - ページ上の要素に適用された配列からのランダムな色

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など。

配列から色を取り出して、ランダムにリストに適用する必要があります。もちろん、これはいくつかの色が2回繰り返されても問題ないことを意味します。

これをどのように達成できるかについてのアイデアはありますか？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フィドルデモ。

Answer 6

基本的に、配列からランダムな値を取得する必要があります。array_randPHPでは、 （http://php.net/manual/en/function.array-rand.php ）を使用してこれを実現できます。1つのアプローチは次のようになります。

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