Let's take a look at the front-end masters and TP masters on how to make the results in the loop have different colors every time.

How can the loop in volist below make the background color of each loop different?
The effect is as shown below
.acti{
width: 100%;
height: 70px;
//border: 1px dashed #7E54DC;
background-color: #E7E7E7;
margin-bottom: 5px;
font-size: 12px;
}

<code>            

            <a href="__APP__/Activity/near_acti_content/ac_id/<{$vo.ac_id}>" ><div class="acti" >
                 <div style="margin-top: 2px;"><i class="fa fa-book fa-fw"></i> <{$vo.ac_title}> <span style="float: right;"><i class="fa fa-cny fa-fw"></i><{$vo.ac_charge}>元</span></div>
                 <div style="margin-top: 5px;"><i class="fa fa-map-marker fa-fw"></i> <{$vo.ac_place}>  </div>
                 <div style="margin-top: 6px;"><i class="fa fa-clock-o fa-fw"></i> <{$vo.ac_time}></div>
            </div>
           </a>

           </volist>
           </code>

Reply content:

How can the following loop in volist make the background color of each loop different?
The effect is as shown below
.acti{
width: 100%;
height: 70px;
//border: 1px dashed #7E54DC;
background-color: #E7E7E7;
margin-bottom: 5px;
font-size: 12px;
}

<code>            

            <a href="__APP__/Activity/near_acti_content/ac_id/<{$vo.ac_id}>" ><div class="acti" >
                 <div style="margin-top: 2px;"><i class="fa fa-book fa-fw"></i> <{$vo.ac_title}> <span style="float: right;"><i class="fa fa-cny fa-fw"></i><{$vo.ac_charge}>元</span></div>
                 <div style="margin-top: 5px;"><i class="fa fa-map-marker fa-fw"></i> <{$vo.ac_place}>  </div>
                 <div style="margin-top: 6px;"><i class="fa fa-clock-o fa-fw"></i> <{$vo.ac_time}></div>
            </div>
           </a>

           </volist>
           </code>

1. Add different classes through the index in the loop, such as c1, c2... Define the styles of these classes in the style.
2. Use the css selector selector:nth-child(n) to add a style to a child element. n can be specific to the nth one, starting from 1. It can also be an expression such as :nth-child(2n) for even items and :nth-child(2n 1) for odd items.

Set the class attribute of the corresponding background color. Then the index value of the eradication cycle takes different class attributes

<code>.bg0{}
.bg1{}
.bg1{}</code>

When looping, take the index value

<code>{foreach $key $val}
<div class='bg{key}'>...</div>
{/foreach}</code>

Try it, I hope it helps you

<code class="js">function getRandomColor() {
    var strColor = '#';
    for (var i = 0; i < 6; i++) {
        var currnet = Math.random() * 15 | 0;
        strColor += currnet.toString(16);
    }
    return strColor;
}
$(".acti").css('background-color',getRandomColor());
</code>

Hahaha, use js to implement a completely random one.

Are you making a webapp?