Random Background Colors for List of Elements

color, random, background, loop, interval

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

li {
    display: block;
    width: 100px;
    height: 100px;
    background: gray;
    margin: 5px;
    transition: all .2s;
}

JavaScript

var colors = ["green", "aquamarine", "cadetblue", "coral", "blue", "orange"];
var delay = 500;

function updateRandomBackgrounds() {
    
    var elements = $('li');
	
    $.each(elements, function(index, element) {
		displayRandomBackground(element);
	});
}

function displayRandomBackground(element) {
	var index = getRandomNumber();
	$(element).css( 'background', colors[index] );
}

function getRandomNumber() {
	return Math.floor(Math.random() * 6);
}

setInterval(updateRandomBackgrounds, delay);

updateRandomBackgrounds();