我在创建红色和黑色div时遇到问题

Question

我的任务是使用循环来显示两种颜色的div。我需要它有12行8列。并且该位置需要是绝对的。

我是编码新手，所以这是一个我想学习的开始任务，但我不知道如何做。

这就是我目前所拥有的，

for(var j = 0; j < i; j++){
}
}       

Answer 1

JSFiddle：https://jsfiddle.net/Leyz1jgw/

解决方案使用<div>的绝对定位。

首先，我定义了一个gen函数，它在位置(left，top((左上角(创建一个35乘35的正方形，背景色为color。

function gen(color, left, top)  {
let redSq = document.createElement("div");   // my Div
redSq.style.position = 'absolute';
redSq.style.backgroundColor =  color;
redSq.style.width = "35px" ;  // width
redSq.style.height = "35px" ; // height
redSq.style.left = left + 'px';
redSq.style.top = top + 'px';
document.body.appendChild(redSq);
}

然后，循环如下：i决定行数，j决定列数
i行中的正方形(i基于0(的上方将有i行。

因此，它应该位于从顶部算起的位置5 + i * (35 + 5)，因为正方形的边为35像素，并且间隙应该为5像素(包括起始间隙(
将类似的逻辑应用于正方形的水平定位

现在进行着色：请注意，对于两个连续的(水平或垂直(正方形，颜色应该是不同的，巧合的是，总和i + j也相应地改变了奇偶性。因此，根据和是偶数还是奇数来给正方形上色。

这是循环的东西：

for(i = 0; i < 12 ; i++){ //rows
for(j = 0; j < 5; j++){ //columns
let left = 5 + (j * 40); //positioning
let top = 5 + (i * 40);
if((i + j) % 2 == 0)  { //coloring
gen('black', left, top);
}  else  {
gen('red', left, top);
}
}
}

Answer 2

使用单个循环，可以使用%模数来确定单元格是否为偶数/奇数以将其变为红色/黑色，以及是否位于行(8个单元格(的末尾以创建新行。

for(var i = 0; i < 64 ; i++){ // foreloop

var redSq = document.createElement("div");   // my Div
redSq.style.backgroundColor =  (i % 2 == 0) ? "red" : "black";
redSq.style.width = "35px" ;  // width
redSq.style.height = "35px" ; // height
redSq.style.margin = "5px";
redSq.style.display = "inline-block";

document.body.appendChild(redSq); // making sure the div appears

if((i+1) % 8 == 0){
document.body.innerHTML += "<br>";
}
}