Question

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

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

https://jsfiddle.net/srowf8hg/

Answer 1

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

＆＃13;

copy.deepcopy(node)

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你的问题很模糊。

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

如果您不知道该怎么做，那么我建议您开始学习一些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等）

我希望这会有所帮助

Answer 3

    package layout;

import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

@SuppressWarnings("serial")
public class CardLayoutExample extends JFrame{
    JPanel totelPanel,btnPan,showPan;
    JButton btn1,btn2;

    public static void main(String[] args) {
        CardLayoutExample ex = new CardLayoutExample();
        ex.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        ex.pack();
        ex.setLocationRelativeTo(null);
        ex.setTitle("BookClube library system");
        ex.setVisible(true);
    }

    public CardLayoutExample(){
        btn1 = new JButton("menu button");
        btn2 = new JButton("back button");
        CardLayout c1 = new CardLayout();

        btnPan = new JPanel();
        btnPan.add(btn1);

        showPan = new JPanel();
        showPan.add(btn2);

        totelPanel = new JPanel(c1);
        totelPanel.add(btn1,"1");
        totelPanel.add(btn2,"2");
        c1.show(totelPanel,"1");

        JPanel fullLayout = new JPanel(new BorderLayout());
        fullLayout.add(totelPanel,BorderLayout.NORTH);

        add(fullLayout);
        btn1.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                c1.show(totelPanel,"2");
            }
        });

        btn2.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                c1.show(totelPanel,"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;
}

Answer 4

最好的方法是使用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>

程序生成3000个正方形

4 个答案: