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
, не работает
извините за ужасный код
undefined
и так далее.