程序生成 3000 个正方形

Question

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

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

https://jsfiddle.net/srowf8hg/

Answer 1

var container = $('#container');
for (var i = 0; i < 3000; i++) {
  container.append($('<div class="square"><h1>10</h1></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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

Answer 2

您只需要一个循环并在每次迭代时创建一个新方块。为了能够单独访问每个方块，每个生成的方块都有自己唯一的 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>

Answer 3

最好的方法是使用 JavaScript 为您制作它们

我在这里做的一个例子会做你想做的事，并为每个人设置一个唯一的 id，这样他们就可以被编辑。

<div id="square_container"> </div>
<script>
    var i, square, text, container = document.getElementById("square_container");
    for (i = 1; i <= 3000; i += 1) {
        square = document.createElement("div");
        square.id = "square" + i;
        square.classList.add("square");
        text = document.createElement("h1");
        text.innerHTML = i;
        text.id = "text" + i;
        square.appendChild(text);
        container.appendChild(square);
    }
</script>

Answer 4

你的问题很含糊。

您愿意（或在项目等家庭作业的情况下）使用哪些技术来实现您的目标？

如果您不知道该怎么做，那么我建议您开始学习一些 jQuery，这是一个 javascript 框架，它允许您做一些非常酷和简单的事情.

如果你最终使用 jquery，你所要做的就是创建一个元素让我们说：

<div id="container"></div>

然后在你的 javascsript 的某个地方你会有一个 javascript 数组，其中包含你正在渲染的对象，比如一个名为 square { color,title,text,name,this,that }

然后你可以创建一个循环，将你的 html 元素构造为字符串并使用 jquery 将元素附加到你的 DOM 中。一个例子是：

var myContainer = $('#container'); <--- this holds a reference to the container element using jquery
for(var i=0,len=myArray.length;i<length;i++){ <-- in my array you would have your "square" objects so that you can modify each square based on parameters like name,title,color etc
    var elementInString = '<div class="square" style="color:"'+myArra[i].color+'>';   <-- and create your parameterised square here
    $(myContainer).append(elementInString);
}

这是一种方法。其他方式包括使用其他框架（Knockout，Angular 等）

希望对您有所帮助

程序生成 3000 个正方形

Generate 3000 squares procedurally

javascript

php

procedure

dynamically-generated

auto-generate