Форум

Vladimir93 · #1 (**permalink**) 16.11.2014, 13:58

Есть, допутсим три, дива. Нужно написать функцию которая будет менять их цвет через каждый интервалы времени. Эти интервалы, могут быть разными для разных дивов. Вот функция. Но, страница даже не грузится

function changeColor (a, id){
            document.getElementById("id").style.backgroundColor = getRandomColor();
            setTimeout(function() {changeColor(a, id)}, a);
        }

Здесь а - это параметр, задающей рандомное количество милисекунд(другой метод). getRandomColor() - метод создающий случайный цвет. Подскажите, что не так.

krutoy · #2 (**permalink**) 16.11.2014, 14:14

document.getElementById("id").style/document.getElementById(id).style

krutoy · #3 (**permalink**) 16.11.2014, 14:35

<html>
<head>
<meta charset="windows-1251" />
</head>
<body>
<div id="foo">foo</foo>
<script>
r=function(){return Math.round(Math.random())}
getRandomColor=function(){return r()? "grey":"black"}

changeColor=function (a, id){
            document.getElementById(id).style.background = getRandomColor()
            setTimeout(function() {changeColor(a, id)}, a);
        }

changeColor(1000, "foo")
</script>
</body>
</html>

Вообще, setInterval для таких вещей использовать логичней.

рони · #4 (**permalink**) 16.11.2014, 14:55

Сообщение от krutoy

setInterval для таких вещей использовать логичней

почему?

Vladimir93 · #5 (**permalink**) 16.11.2014, 14:57

Да, я видел такой пример в интернете. Тут понятно. А вконтексте такой задачи

<!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 - закомментированные. Но не выходит.

krutoy · #6 (**permalink**) 16.11.2014, 15:01

рони,
Потому что тут бесполезная рекурсия, имитирующая тупую итерацию

рони · #7 (**permalink**) 16.11.2014, 20:12

Vladimir93,
Вариант для современных браузеров ... меняет фон последних трёх div -- время из data - вопросы знатокам , почему не работает в хроме, почему не работает строка 44 без window.setTimeout и как заменить если можно window.setTimeout ... есть и ещё вопросы

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        .animated {
            transition: background-color 2s 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 class="animated" data-duration="5s"></div>
    <div class="animated" data-duration="5s"></div>
    <div class="animated" data-duration=".7s"></div>
    <div class="animated" data-duration="8s"></div>

    <script> function randomRGBComponent() {
           return Math.round(Math.random() * 255);
       }

       function randomRGBColor() {
           return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
       }

       function setBackgroundColor(elem, s) {
           function go() {
               var color = randomRGBColor()
               elem.style.backgroundColor = color
           }
           elem.style.transitionDuration = s;
           elem.addEventListener('transitionend', go, false);
           go() //window.setTimeout(go, 0);
       }
       window.onload = function() {
           [].forEach.call(document.querySelectorAll('.animated:nth-last-child(-n + 4)'), function(elem, i) {
               setBackgroundColor(elem, elem.dataset.duration)
           })
       }
    </script>
</body>

</html>

Vlasenko Fedor · #8 (**permalink**) 16.11.2014, 22:29

еще вариант

<!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>

Octane · #9 (**permalink**) 17.11.2014, 12:13

Сообщение от krutoy

Потому что тут бесполезная рекурсия, имитирующая тупую итерацию

Здесь нет длинного рекурсивного стека вызовов, каждый setTimeout вызывает функцию в новом стеке.

krutoy · #10 (**permalink**) 17.11.2014, 15:22

Octane,
однако это не повод писать через жопу.

Форум

Справочник

Discord чат

Курсы javascript