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

Question

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

我是编码新手，所以这是我想学习的入门作业，但我不知道该怎么做。

这是我目前所拥有的，

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

    }
}

Answer 1

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

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

首先，我定义了一个 gen 函数，它在位置 (left, top)（左上角）处创建一个 35 x 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

使用单个循环，您可以使用 % 模数来确定单元格是否 even/odd 将其翻转 red/black 以及它是否位于行（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>";
   }
}

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

I am having issues creating red and black divs

icsharpcode