Показать сообщение отдельно
  #5 (permalink)  
Старый 16.11.2014, 14:57
Интересующийся
Отправить личное сообщение для Vladimir93 Посмотреть профиль Найти все сообщения от Vladimir93
 
Регистрация: 08.11.2014
Сообщений: 27

Да, я видел такой пример в интернете. Тут понятно. А вконтексте такой задачи
<!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 - закомментированные. Но не выходит.
Ответить с цитированием