doutong2132 2016-11-20 18:17
浏览 85
已采纳

程序生成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/

  • 写回答

4条回答 默认 最新

  • douguo6472 2016-11-20 18:27
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题