Есть 100 дивов, десять в строку и таких 10 строк, нужно окрасить эти дивы в красный цвет с разной прозрачностью, с 0.01 для первого, 0.02 для второго... 1 для последнего.
Делаем окрашивание внутри цикла.
Как сделать так, чтобы окрашивание происходило непосредственно во время выполнения циклов, но первый окрашивался с задержкой 100 мс, второй 200 мс и т.д.
(У нас сначала выполняется весь цикл, а потом сразу показывается все цветные дивы)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.d {
float:left;
width:70px;
height:70px;
box-sizing:border-box;
display:inline;
}
.wrapper{
width:700px;
height:700px;
}
</style>
</head>
<body>
<div class = "wrapper">
<div class = "d0_0 d"></div>
<div class = "d0_1 d"></div>
<div class = "d0_2 d"></div>
<div class = "d0_3 d"></div>
<div class = "d0_4 d"></div>
<div class = "d0_5 d"></div>
<div class = "d0_6 d"></div>
<div class = "d0_7 d"></div>
<div class = "d0_8 d"></div>
<div class = "d0_9 d"></div>
<div class = "d1_0 d"></div>
<div class = "d1_1 d"></div>
<div class = "d1_2 d"></div>
<div class = "d1_3 d"></div>
<div class = "d1_4 d"></div>
<div class = "d1_5 d"></div>
<div class = "d1_6 d"></div>
<div class = "d1_7 d"></div>
<div class = "d1_8 d"></div>
<div class = "d1_9 d"></div>
<div class = "d2_0 d"></div>
<div class = "d2_1 d"></div>
<div class = "d2_2 d"></div>
<div class = "d2_3 d"></div>
<div class = "d2_4 d"></div>
<div class = "d2_5 d"></div>
<div class = "d2_6 d"></div>
<div class = "d2_7 d"></div>
<div class = "d2_8 d"></div>
<div class = "d2_9 d"></div>
<div class = "d3_0 d"></div>
<div class = "d3_1 d"></div>
<div class = "d3_2 d"></div>
<div class = "d3_3 d"></div>
<div class = "d3_4 d"></div>
<div class = "d3_5 d"></div>
<div class = "d3_6 d"></div>
<div class = "d3_7 d"></div>
<div class = "d3_8 d"></div>
<div class = "d3_9 d"></div>
<div class = "d4_0 d"></div>
<div class = "d4_1 d"></div>
<div class = "d4_2 d"></div>
<div class = "d4_3 d"></div>
<div class = "d4_4 d"></div>
<div class = "d4_5 d"></div>
<div class = "d4_6 d"></div>
<div class = "d4_7 d"></div>
<div class = "d4_8 d"></div>
<div class = "d4_9 d"></div>
<div class = "d5_0 d"></div>
<div class = "d5_1 d"></div>
<div class = "d5_2 d"></div>
<div class = "d5_3 d"></div>
<div class = "d5_4 d"></div>
<div class = "d5_5 d"></div>
<div class = "d5_6 d"></div>
<div class = "d5_7 d"></div>
<div class = "d5_8 d"></div>
<div class = "d5_9 d"></div>
<div class = "d6_0 d"></div>
<div class = "d6_1 d"></div>
<div class = "d6_2 d"></div>
<div class = "d6_3 d"></div>
<div class = "d6_4 d"></div>
<div class = "d6_5 d"></div>
<div class = "d6_6 d"></div>
<div class = "d6_7 d"></div>
<div class = "d6_8 d"></div>
<div class = "d6_9 d"></div>
<div class = "d7_0 d"></div>
<div class = "d7_1 d"></div>
<div class = "d7_2 d"></div>
<div class = "d7_3 d"></div>
<div class = "d7_4 d"></div>
<div class = "d7_5 d"></div>
<div class = "d7_6 d"></div>
<div class = "d7_7 d"></div>
<div class = "d7_8 d"></div>
<div class = "d7_9 d"></div>
<div class = "d8_0 d"></div>
<div class = "d8_1 d"></div>
<div class = "d8_2 d"></div>
<div class = "d8_3 d"></div>
<div class = "d8_4 d"></div>
<div class = "d8_5 d"></div>
<div class = "d8_6 d"></div>
<div class = "d8_7 d"></div>
<div class = "d8_8 d"></div>
<div class = "d8_9 d"></div>
<div class = "d9_0 d"></div>
<div class = "d9_1 d"></div>
<div class = "d9_2 d"></div>
<div class = "d9_3 d"></div>
<div class = "d9_4 d"></div>
<div class = "d9_5 d"></div>
<div class = "d9_6 d"></div>
<div class = "d9_7 d"></div>
<div class = "d9_8 d"></div>
<div class = "d9_9 d"></div>
</div>
<script>
var y = 1;
for( var i = 0; i<10; i++) {
for( var t = 0; t<10; t++) {
function nnn () {
document.querySelector(".d"+i+"_"+t).style.backgroundColor = "rgba(255,0,0," + (i/10 + t/100 + 0.01) + ")"
};
setTimeout (nnn(), y*100);
y += 1;
}
};
</script>
</body>
</html>