еще вариант
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
div[id^=animated] {
transition: background-color 0.5s ease-out;
width: 150px;
height: 150px;
margin: 10px;
border: 1px solid black;
display: inline-block;
background-color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<div id="animated1"></div>
<div id="animated2"></div>
<div id="animated3"></div>
<script>
function ColorDiv(params) {
if (!(this instanceof ColorDiv)) {
return new ColorDiv(params);
}
this.initialize.apply(this, arguments);
}
ColorDiv.prototype.initialize = function (params) {
setInterval(function () {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters.charAt(Math.floor(Math.random() * 16));
}
params.element.style.backgroundColor = color;
}, params.interval);
}
ColorDiv({
element: document.getElementById('animated1'),
interval: 800
});
ColorDiv({
element: document.getElementById('animated2'),
interval: 1200
});
ColorDiv({
element: document.getElementById('animated3'),
interval: 2000
});
</script>
</body>
</html>