javascript - 程序生成 3000 个正方形

Question

我需要构建一个包含 3000 个正方形的小部件。手动执行此操作会花费很长时间，也许你们中的一些人知道生成类 .square 3000 次的最简单方法？我还需要能够改变每个方 block 的内容，例如颜色、标题等。谢谢 friend 们!

<div class="square">
  <h1>10</h1>
</div>

https://jsfiddle.net/srowf8hg/

Answer 1

您只需要一个循环并在每次迭代时创建一个新方 block 。为了能够单独访问每个方 block ，每个生成的方 block 都有自己唯一的 ID:

var cont = document.getElementById("container");

for(var i = 1; i <3001; ++i){
 var div = document.createElement("div");
 div.setAttribute("class", "square");
 div.setAttribute("id", "div" + i);
 
 var h1 = document.createElement("h1");
   h1.textContent = i;
   div.appendChild(h1);
   cont.appendChild(div);
 }

.square{
  background:#fa5339;
  color:#fff;
  width:100px;
  height:100px;
  float:left;
  border:1px solid #d63d26;
}
h1{
    height: 50%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

<div id=container>
  
</div>