在网上看到很多都是使用两个循环嵌套起来生成10*10个div,今天想到了一些新的方法,就记录了下来。其实这个实现并不复杂,只是需要费点心思找下规律。
html代码如下:
<div class="wrap"></div>
10*10个小div是由js动态生成,所以在结构中只需要写出外框。
首先使用循环嵌套和定位来实现
css代码如下:
.wrap{
width:1000px;
height:1000px;
border:1px solid #000;
position:relative;
}
.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倍。