Да, я видел такой пример в интернете. Тут понятно. А вконтексте такой задачи
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<body>
<script type="text/javascript">
var params = {
lines: [
{
background: getRandomColor(),
updateTime: randomNumber(1, 1000),
elements: [{
background: getRandomColor(),
width: 25
},
{
background: getRandomColor(),
width: 25
},
{
background: getRandomColor(),
width: 25
}]
},
{
background: getRandomColor(),
updateTime: randomNumber(1,800),
elements: [{
background: getRandomColor(),
width: 15
},
{
background: getRandomColor(),
width: 15
},
{
background: getRandomColor(),
width: 15
}]
},
{
background: getRandomColor(),
updateTime: randomNumber(1,1200),
elements: [{
background: getRandomColor(),
width: 15
},
{
background: getRandomColor(),
width: 15
},
{
background: getRandomColor(),
width: 15
}]
}]
};
/*global document: false*/
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function randomNumber (a, b){
a = parseInt(a);
b = parseInt(b);
return Math.floor( Math.random()* (b - a + 1)) + a;
}
// document.getElementById(id).style.backgroundColor = getRandomColor();
// setInterval('changeColor(a, id)', a);
function changeColor1 (a, id){
document.getElementById(id).style.backgroundColor = getRandomColor();
setTimeout(function() {changeColor(a, id)}, a);
}
// function changeColor (id){
// document.getElementById(id).style.backgroundColor = getRandomColor();
// }
var a = 100/params.lines.length;
var array = new Array();
for (var i = 0; i < params.lines.length; i++ ){
var d = document.createElement('div');
d.id = 'i';
d.style.width = 100 + '%';
d.style.height = a + '%';
d.style.backgroundColor = params.lines[i].background;
array.push(i);
// changeColor1(params.lines[i].updateTime, i);
for (var j =0; j < params.lines[i].elements.length; j++){
var div1 = document.getElementById('i');
var div2 = document.createElement('div');
div2.style.backgroundColor = params.lines[i].elements[j].background;
div2.style.float = 'left';
div2.style.width = params.lines[i].elements[j].width + '%';
div2.style.height = a + '%';
div2.innerHTML;
document.body.appendChild(div2);
}
document.body.appendChild(d);
// setInterval(changeColor('i'),params.lines[i].updateTime);
}
for (var k = 0; k < array.length; k++){
changeColor(params.lines[k].updateTime, array[k]);
}
</script>
<link rel="stylesheet" type="text/css" href="CSS.css">
</body>
</head>
</html>
Нужно, чтобы нижние дивы полсе загрузки страницы меняли цвета. Пробовал и через setInterval - закомментированные. Но не выходит.