我有一个完整的代码,用于5x5盒子的div。但是,我想使用2 for循环来实现它,而不是写25个div。我尝试了几件事情,但无法解决这个问题,因为我需要为每个人提供唯一的ID(正如您在代码中看到的那样)。每个类似的不同随机类名(box1,box2,box3,box4,box5)我有5个不同的类,因为我有不同的动画顺序。需要帮助解决此问题。我检查了几乎每个主题。
编辑,我应该有2个for循环,一个用于第一行。 下面的代码是我的尝试。
for(var i=0; i<5; i++)
{
for(var j=0; j<5; j++)
{
document.write('<div class="box2" id=1>'
+'<script> randomColorGenerator();'
+ '</'+ 'script> </div>');
}
}
<div class="box" id="1" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box3" id="2" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box4" id="3" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box2" id="4" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box5" id="5" >
<script>
randomColorGenerator();
</script>
</div>
<div class="clear"></div>
<div class="box2" id="6">
<script>
randomColorGenerator();
</script>
</div>
<div class="box" id="7">
<script>
randomColorGenerator();
</script>
</div>
<div class="box5" id="8" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box4" id="9">
<script>
randomColorGenerator();
</script>
</div>
<div class="box3" id="10">
<script>
randomColorGenerator();
</script>
</div>
<div class="clear"></div>
<div class="box5" id="11">
<script>
randomColorGenerator();
</script>
</div>
<div class="box4" id="12" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box3" id="13">
<script>
randomColorGenerator();
</script>
</div>
<div class="box2" id="14" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box" id="15" >
<script>
randomColorGenerator();
</script>
</div>
<div class="clear"></div>
<div class="box" id="16">
<script>
randomColorGenerator();
</script>
</div>
<div class="box5" id="17" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box3" id="18" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box2" id="19" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box4" id="20" >
<script>
randomColorGenerator();
</script>
</div>
<div class="clear"></div>
<div class="box3" id="21">
<script>
randomColorGenerator();
</script>
</div>
<div class="box4" id="22" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box" id="23">
<script>
randomColorGenerator();
</script>
</div>
<div class="box2" id="24" >
<script>
randomColorGenerator();
</script>
</div>
<div class="box5" id="25">
<script>
randomColorGenerator();
</script>
</div>
<div class="clear"></div>
答案 0 :(得分:0)
让我们分解,首先制作一个能为你生成div的函数。
function createDiv(index) {
var animationClass = Math.floor(Math.random() * 5) + 1;
var div = document.createElement('DIV');
div.class = 'box' + animationClass;
div.id = index;
return div;
}
接下来循环多次,并将div添加到容器元素。
var container = document.getElementById('container');
for (var i=0; i <= 25; i++){
container.appendChild(createDiv(i));
}
请注意,要使其生效,您需要拥有id
container
的元素。
答案 1 :(得分:0)
尝试以下
for(var i = 1; i <= 25; i++) {
var id = i % 5;
var cssClass = 'box' + id;
var divID = 'div'+i;
console.log(i + ' id='+id+', divId=' + divID + ', cssClass=' + cssClass);
if(id == 0) {
console.log('INSERT CLEAR DIV HERE');
}
}