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

Question

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

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

这是我目前所拥有的

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

    }
}       

Answer 1

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

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

首先，我定义了一个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数，列数。第 - 行
中的正方形（从 0 开始）将在其上方有行。 所以，它应该在距离顶部的位置，因为正方形的边长为 35 像素，间隙应该是 5 像素（包括起始间隙）。 对正方形的水平定位应用类似的逻辑。 现在进行着色：请注意，对于两个连续（水平或垂直）的正方形，颜色应该是不同的，巧合的是，总和也会相应地改变奇偶校验。因此，根据总和是偶数还是奇数，为正方形着色。iii

5 + i * (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>";
   }
}