У меня проблемы с созданием красных и черных div - PullRequest
Новая
       74

У меня проблемы с созданием красных и черных div

0 голосов
/ 04 мая 2020

Моя задача - использовать циклы для отображения двухцветного div. Мне нужно, чтобы было 12 строк и 8 столбцов. и позиция должна быть абсолютной.

Я новичок в кодировании, поэтому это начальное задание, которое я хотел бы изучить, но я не могу понять, как это сделать.

Это то, что у меня есть, 

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

    }
}

Ответы [ 2 ]

0 голосов
/ 04 мая 2020

Используя один l oop, вы можете использовать% модуля, чтобы определить, является ли ячейка четной / нечетной, чтобы сделать ее красной / черной, и находится ли она в конце строки (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>";
   }
}
0 голосов
/ 04 мая 2020

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

Решение использует абсолютное позиционирование <div>.

Сначала я определил функцию gen, которая создает квадрат 35 на 35, в позиции (left, top) (верхний левый угол) и с цветом фона 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 пикселей (включая начальный зазор).
Примените аналогичный лог. c для горизонтального расположения квадратов.

Теперь о раскраске: обратите внимание, что для двух последовательных (горизонтальных или вертикальных) квадратов цвета должны быть разными, и по совпадению сумма 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);
        }
    }
}
...