为创建的每个新div更改div的背景颜色

Question

我有一个为每个唯一事件创建一个新div的循环

while($event!=$nextEvent){

echo'<div id='sportType'>';
//some code
echo'</div>'
}

我想自动将背景颜色更改为每个创建的div的不同背景颜色，每个div必须是单独/唯一的颜色，永远不会超过7个div < / p>

像这样的东西

知道我该怎么做吗？

Answer 1

由于最多有7个div，您可以使用纯css和nth-child选择器

来执行此操作

div:nth-child(1) {
    background: gray;
}
div:nth-child(2) {
    background: red;
}
div:nth-child(3) {
    background: cyan;
}
div:nth-child(4) {
    background: blue;
}
div:nth-child(5) {
    background: black;
}
div:nth-child(6) {
    background: green;
}
div:nth-child(7) {
    background: yellow;
}

如果你想要超过七个div，那么使用像

这样的javascript会更实用

＆＃13;

＆＃13;

var divs = document.getElementsByTagName('div');

for(var i =0; i < divs.length; i++){
divs[i].style.background = getRandomColor();
}
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

＆＃13;

<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>

＆＃13;

＆＃13;

＆＃13;

Random color generator in JavaScript

Answer 2

您可以在PHP中自行完成以下操作

声明一个包含颜色代码的数组，并在动态创建<div>时使用数组。请参阅下面的代码作为示例

<?php $color= array("#341014", "#BE6353", "#2F2E3B","#20222B","#BB644C","#F8834E","#E4B9AC"); 
$i=0;
while($event!=$nextEvent){
   echo"<div id='sportType' style='background-color:".$color[i].";'>";
   //some code
   echo'</div>';
   $i++;
}
?>

您可以在数组中指定任意数量的颜色，即使创建了大量<div>，也会相应地应用颜色，例如，如果您想要创建100个div，则可以在数组中添加100个或100个以上的颜色代码，这些颜色将在while循环中使用。

Answer 3

您可以使用函数rand生成新颜色

while($event!=$nextEvent){
$r=rand(0, 255);
$g=rand(0, 255);
$b=rand(0, 255);
echo"<div id=\"sportType\" style=\"backgroung:rgb($r,$g,$b);\">";
//some code
echo "</div>"
}

rand函数会为RGB颜色集合创建一个随机数。