程序生成3000个正方形

问题描述：

I need to build a widget that contains 3000 squares. Doing this manually would take a very long time, maybe some of you know the easiest way to generate the class .square 3000 times? I need also be able to alter the content of each square, for example a color, title, etc. Thx friends!

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

https://jsfiddle.net/srowf8hg/

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

 ＆lt; div class =“square”＆gt; 
＆lt; h1＆gt; 10＆lt; / h1＆gt; 
＆lt; / div＆gt; 
  code>  pre  > 
 
   https://jsfiddle.net/srowf8hg/   p> \  n  div>

答

You just need a loop and create a new square on each iteration. In order to be able to access each square individually, each generated square gets its own unique 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>

</div>

答

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>

</div>

答

the best way would be to use JavaScript to make them for you

an example that I made here will do what you want, and also set each one a unique id so they can be edited.

<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>

答

Your question is very vague.

What technologies are you willing ( or able in the case of homework like project) to use to achieve your goal?

If you have no idea how to do it then i would suggest you start learning of some jQuery, that is a javascript framework, that allows you to do some pretty cooll and easy stuff.

If you do end up using jquery, all you would have to do is to create an element lets say:

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

and then somewhere in your javascsript you would have a javascript array with the objects that you are rendering for, say an object named square { color,title,text,name,this,that }

And after that you could just create a loop,construct your html elements as string and use jquery to append the elements in your DOM. An example would be :

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);
}

This is one way to do it. Other way include using other frameworks (Knockout,Angular etc)

I hope this helps

相关推荐