js-使用js生成10*10个带标号的div

在网上看到很多都是使用两个循环嵌套起来生成10*10个div,今天想到了一些新的方法,就记录了下来。其实这个实现并不复杂,只是需要费点心思找下规律。
html代码如下:

<div class="wrap"></div>

10*10个小div是由js动态生成,所以在结构中只需要写出外框。
首先使用循环嵌套和定位来实现
css代码如下:

.wrap{
    width:1000px;
    height:1000px;
    border:1px solid #000;
    positionrelative;
}
.wrap div{
    width:98px;
    height:98px;
    border:1px solid #000;
    position:absolute;
    font:18px/98px "微软雅黑";
    text-align:center;
}

js代码如下:

var box=document.querySelector(".wrap");
var inner="";
for(var i=0;i<10;1++){
    for(var j=0;j<10;j++){
       inner+='<div style="left:'+i*100+'px;top:'+j*100+'px;>'+(i*10+j)+'</div>';
       }
   }
   box.innerHTML=inner;

其次是使用浮动和单层嵌套,结构不变,稍微修改下css样式。

.wrap{
    ....
    //与上文css样式类似,只需去除position
}
.wrap div{
    ....
    //与上文css样式类似,只需去除position,然后设置左浮动
    float:left;
}

js代码如下所示

var box=document.querySelector(".wrap");
var inner="";
for(var i=0;i<100;i++){
    inner+='<div>'+i+'</div>
    }
     box.innerHTML=inner;

最后是使用定位和单层嵌套。结构和样式与第一个方法所用的相同,故不再赘述。js代码如下所示:

var box=document.querySelector(".wrap");
var inner="";
for(var i=0;i<100;i++){
    var x=i%10;//x为个位数;
    var y=parseint(i/10);//y为10位数;
    inner += '<div style="left:'+x*100+'px;top:'+y*100+'px">'+i+'</div>';
}
box.innerHTML=inner;

这三种方法中,使用浮动代码量最少的。但是浮动在没有设置父级高度时,需要给父级清浮动。第一种方法比较容易想到,第三种则是深挖规律的出来的写法。

有的人会问,为什么还要定义一个空的inner来存储内容,直接使用box.inneHTML不是也可以吗?没错,理论上来说,直接使用box.innerHTML是可以达到相同的效果。但是据实际情况来说,获取或更改页面结构是非常耗性能的。在循环中定义一个空字符串来存贮循环产生的内容,再一次性写入页面会比每次循环改变页面结构写入内容,耗用时间会减少近30倍。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值