0
window.onload = function() {
    //создание HTML разметки
    var container = document.createElement('div');
    container.className = "container-fluid";
    container.id = "container";
    container.setAttribute("style", "display:block;");
    document.body.appendChild(container);
    containerGet = document.getElementById('container');
    var rowFirstChild = containerGet.firstChild;
    var row = document.createElement('div');
    row.className = "row";
    row.id = "row";
    containerGet.appendChild(row);
    //создание элемента
    for (var i = 0; i < 10; i++) {
        rowGet = document.getElementById('row');
        var d = rowGet.firstChild;
        var d = document.createElement('div');
        var n = d + i;
        console.log('n' + n);
        d.id = i + 1;
        d.className = "divs";
        d.setAttribute("style", "display:block;");
        d.classList.add('newDiv');
        d.style.zIndex = i + 1;
        d.style.opacity = 0;
        var z = i + 1;
        //определение ширины 
        var widthpx = widthnumber();

        function widthnumber(m, n) {
            m = parseInt(0);
            n = parseInt(90);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        var widthx = widthpx + '%';
        d.style.width = widthx;
        //опрадиление высоты
        var heightpx = heightnumber();

        function heightnumber(m, n) {
            m = parseInt(0);
            n = parseInt(90);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        var heightx = heightpx + '%';
        d.style.height = heightx;
        //опредиление расстояния от верхнего края
        var toppx = topnumber();

        function topnumber(m, n) {
            m = parseInt(0);
            n = parseInt(50);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        console.log(toppx);
        var topx = marginUp(z, toppx);

        function marginUp(z, toppx) {
            if (z == 1) {
                console.log(toppx);
                return topx = toppx + '%';
            } else if (z => 2) {
                return topx = toppx + '%';
            } else if (z < 1) {
                alert(0);
            }
        }
        d.style.marginTop = topx;
        //опредиление расстояния от левого края
        var leftpx = leftnumber();

        function leftnumber(m, n) {
            m = parseInt(0);
            n = parseInt(50);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        var leftx = leftpx + '%';
        d.style.marginLeft = leftx;
        //опредиление радиуса скругления
        var borderpx = bordernumber();

        function bordernumber(m, n) {
            m = parseInt(0);
            n = parseInt(100);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        var borderx = borderpx + '%';
        d.style.borderRadius = borderx;
        //опредиление цвета фона
        var r = rnumber();

        function rnumber(m, n) {
            m = parseInt(0);
            n = parseInt(255);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        var g = gnumber();

        function gnumber(m, n) {
            m = parseInt(0);
            n = parseInt(255);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        var b = bnumber();

        function bnumber(m, n) {
            m = parseInt(0);
            n = parseInt(255);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        var rgbColor = 'rgb(' + r + ',' + g + ',' + b + ')';
        d.style.backgroundColor = rgbColor;
        //прозрачность
        var opacitypx = opacitynumber();

        function opacitynumber(m, n) {
            m = parseInt(0);
            n = parseInt(99);
            return Math.floor(Math.random() * (n - m + 1)) + m;
        }
        var opacityx = opacitypx / 100;
        console.log('d.style.opacity1_' + d.style.opacity);
        //анимации
        d.setAttribute("transition-property", "transition-duration");
        var transProprty = d.style.opacity;
        var transDuration = 3 + 's';
        d.style.transitionProperty = transProprty;
        d.style.transitionDuration = transDuration;


        nw=(function (d){
        animate(function(timePassed) {
        var opacityMax = opacityx;
        if ( opacityMax >= d.style.opacity )
        d.style.opacity = timePassed / 100 ;
        }, 2000);
        }).bind(0, d);

        nw();
        // Рисует функция draw
        // Продолжительность анимации duration
        function animate(draw, duration) {
            var start = performance.now();

            requestAnimationFrame(function animate(time) {
                // определить, сколько прошло времени с начала анимации
                var timePassed = time - start;
                // возможно небольшое превышение времени, в этом случае зафиксировать конец
                if (timePassed > duration) timePassed = duration;
                // нарисовать состояние анимации в момент timePassed
                draw(timePassed);

                // если время анимации не закончилось - запланировать ещё кадр
                if (timePassed < duration) {
                    requestAnimationFrame(animate);
                }

            });
        }

        console.log('d.style.opacity2_' + d.style.opacity);
        rowGet.appendChild(d);
    }
}

В этом варианте работает только анимация с последним созданным элементом, игнорируя значения переменной opacityx, полученного рандомно. Пробовал обращаться к id через getElementById но id меняется, а обратится к переменной, вписав в getElementById, не работает

извините за ужасный код

3
  • Непонятно, что конкретно должен делать ваш код. И вообще, мне кажется, его писали не вы — в коде есть три одинаковых функции с разными названиями, значению opacity элемента присваивается undefined и так далее.
    – Im ieee
    Commented 5 нояб. 2015 в 8:36
  • maxsokal.ho.ua/random/index.html загрузил файлы посмотрите что код делает, спасибо за ответ, иначе реализовать не получилось Commented 5 нояб. 2015 в 8:51
  • должно появляться 10 рандомных элемментов, но функция animate срабатывает только на последний элемент Commented 5 нояб. 2015 в 8:53

1 ответ 1

0

Один элемент вместо 10 появляется из-за того, что переменная d меняется в цикле и соответственно в конце цикла в функции nw будет её последнее значение. Решение — сделать функцию-обёртку с помощью bind:

nw=(function (d){
    animate(function(timePassed) {
    var opacityMax = opacityx;
    if ( opacityMax >= d.style.opacity )
       d.style.opacity = timePassed / 100 ;
    }, 2000);
}).bind(0, d);

nw();

вместо

var opacityn  =  nw ();

    function nw () {
      animate(function(timePassed) {
        var opacityMax = opacityx;
        console.log(opacityMax);
        if ( opacityMax >= d.style.opacity )
        d.style.opacity = timePassed / 100 ;
      }, 2000);
    };

И строку

d.style.opacity = opacityn;

нужно убрать.

1
  • спасибо за ответ, анимация теперь действует на все 10 элементов, буду делать задержку между циклами т.к. анимация 10 элементов срабатывает одновременно Commented 5 нояб. 2015 в 9:45

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.