Добрый день. Выкладываю код который показывает, какой шаблон должен быть( в данном конкретном примере). Скажу сразу в JS новичок.
<!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;
}
function changeColor (a){
this.backgroundColor = getRandomColor();
setTimeout('changeColor(a)', a)
}
var a = 100/params.lines.length;
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;
window.d.onload = changeColor(params.lines[i].updateTime);
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);
}
</script>
<link rel="stylesheet" type="text/css" href="CSS.css">
</body>
</head>
</html>
То есть у нас есть JSON объект. В котормо задаными( в данном случае) три элемента(фон, апдэйттайм и подмассив Elements). То есть создаются три блока(линии) на всю высоту экрана и в эти линии вставляются подблоки с длиной width указанной в Elements. Если суммарное width не дошло до сотни, то линия(нижний див) продолжается.
Теперь сам вопрос: неполучается задать изменение фона "нижних div-ов" с интервалом upDateTime. То есть при загрузки страницы, все нижние дивы должны менять свой цвет,допустим, каждые пол секунды и так до бесконечности, пока не закрою страницу. Переделываю верхний код. страница вообще не грузится - белый экран.
function changeColor (a, id){
document.getElementById(id).style.backgroundColor = getRandomColor();
setInterval('changeColor(a, id)', a);
}
var a = 100/params.lines.length;
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;
d.onload = changeColor(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);
}
