random background-color on div without the same color repeating twice consecutively

Question

Well I want to create a sequence of DIV, only that I want each DIV have in your background-color a previously settled random color, type black, yellow and green, but I do not want these colors to repeat one after the other.

Type :yellow >> yellow >> black>> green >> black

I want it to look something like this :: yellow >> black >> yellow >> green >> black

Currently I use this code to generate random colors pro background-color, but this code repeats the colors one after the other, since the random color is generated in the refresh of the page.

<?php
$cor = array();
$cor[1] = "#CFF";
$cor[2] = "#9FF";
$cor[3] = "#600";
$cor[4] = "#FF0";
$cor[5] = "#C69";
$cor[6] = "#0F0";
$contador = count($cor);
$aleatorio = rand(1,$contador);
?>

<style>
div{margin-left:15px; width:100px; height:100px; float:left}
</style>

<div style="background-color:<?php echo $cor[$aleatorio] ?>"></div>
<div style="background-color:<?php echo $cor[$aleatorio] ?>"></div>
<div style="background-color:<?php echo $cor[$aleatorio] ?>"></div>
<div style="background-color:<?php echo $cor[$aleatorio] ?>"></div>
<div style="background-color:<?php echo $cor[$aleatorio] ?>"></div>
<div style="background-color:<?php echo $cor[$aleatorio] ?>"></div>

In this case my problem is not to repeat the colors, but to repeat the same color one after the other. That is why I quoted the above pattern " yellow >> yellow >> black >> green >> black", in which case equal colors repeat one after the other. The colors can even repeat COUNTLESS times, but I don’t want it to repeat one after the other, I want it to be something like :: Yellow >> black >> Yellow >> black

Answer 1

If you want to switch colors between the divs, it is easier to create a function:

<?php
   function corAleatoria() {
      static $corAnterior = 0;
      static $cor = array( '#CFF', '#9FF', '#600', '#FF0', '#C69', '#0F0' );

      $aleatorio = rand( $corAnterior?1:0, count( $cor ) - 1 );
      if( $aleatorio >= $corAnterior ) $aleatorio++;
      $corAnterior = $aleatorio;
      return $cor[$aleatorio - 1];
   }
?>

<style>
   div{margin-left:15px; width:100px; height:100px; float:left}
</style>

<div style="background-color: <?php echo corAleatoria(); ?>"></div>
<div style="background-color: <?php echo corAleatoria(); ?>"></div>
<div style="background-color: <?php echo corAleatoria(); ?>"></div>
<div style="background-color: <?php echo corAleatoria(); ?>"></div>
<div style="background-color: <?php echo corAleatoria(); ?>"></div>
<div style="background-color: <?php echo corAleatoria(); ?>"></div>

So every time you’re called to corAleatoria(), a string will be returned with the color drawn and not repeated.

If in the future divs in loop, can simplify the process in this way:

<style>
   div{margin-left:15px; width:100px; height:100px; float:left}
</style>

<?php
   $corAnterior = 0;
   $cor = array( '#CFF', '#9FF', '#600', '#FF0', '#C69', '#0F0' );
   $max = count( $cor ) - 1;

   for( $i = 0; $i < 10; $i++ ) {
      $aleatorio = rand( $corAnterior?1:0, $max );
      if( $aleatorio >= $corAnterior ) $aleatorio++;
      $corAnterior = $aleatorio;

      echo '<div style="background-color: '.$cor[$aleatorio - 1].'"></div>';
   }
?>

Answer 2

Can solve in a simpler way:

<?php
$cor = array();
$cor[1] = "#CFF";
$cor[2] = "#9FF";
$cor[3] = "#600";
$cor[4] = "#FF0";
$cor[5] = "#C69";
$cor[6] = "#0F0";

//altera de forma aleatória os membros da array.
shuffle($cor);
?>

<style>
div{margin-left:15px; width:100px; height:100px; float:left}
</style>

<div style="background-color:<?php echo $cor[0] ?>"></div>
<div style="background-color:<?php echo $cor[1] ?>"></div>
<div style="background-color:<?php echo $cor[2] ?>"></div>
<div style="background-color:<?php echo $cor[3] ?>"></div>
<div style="background-color:<?php echo $cor[4] ?>"></div>
<div style="background-color:<?php echo $cor[5] ?>"></div>