01
<!DOCTYPE HTML>
02
<html>
03
04
<head>
05
<title>Untitled</title>
06
<meta charset="utf-8">
07
<style>
08
div[id^=animated] {
09
transition: background-color 0.5s ease-out;
10
width: 150px;
11
height: 150px;
12
margin: 10px;
13
border: 1px solid black;
14
display: inline-block;
15
background-color: rgb(255, 255, 0);
16
}
17
</style>
18
</head>
19
20
<body>
21
<div id="animated1"></div>
22
<div id="animated2"></div>
23
<div id="animated3"></div>
24
<script>
25
function ColorDiv(params) {
26
if (!(this instanceof ColorDiv)) {
27
return new ColorDiv(params);
28
}
29
this.initialize.apply(this, arguments);
30
}
31
ColorDiv.prototype.initialize = function (params) {
32
setInterval(function () {
33
var letters = '0123456789ABCDEF';
34
var color = '#';
35
for (var i = 0; i < 6; i++) {
36
color += letters.charAt(Math.floor(Math.random() * 16));
37
}
38
params.element.style.backgroundColor = color;
39
}, params.interval);
40
}
41
42
ColorDiv({
43
element: document.getElementById('animated1'),
44
interval: 800
45
});
46
ColorDiv({
47
element: document.getElementById('animated2'),
48
interval: 1200
49
});
50
ColorDiv({
51
element: document.getElementById('animated3'),
52
interval: 2000
53
});
54
</script>
55
</body>
56
</html>
