<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
.huaBu{
width: 400px;
height: 400px;
position: absolute;
}
</style>
</head>
<body>
<div class="huaBu"></div>
<script>
// 创建一个二维坐标数组
var ewszArr = [];
// 创建一个文档碎片,方便加载,节省时间(可写可不写,写了更好,作用是便于优化,提高加载速度)
var frag = document.createDocumentFragment();
// 为了不使创建的item叠在一行中,用到了上margin定位,
// 创建了20行,0~19.
for(var j=0; j<20; j++)
{
// 创建一个一维数组
var ywsz = [];
for(var i=0; i<20; i++){
// 每次循环就给div中创建一个item元素,创建20个,0~19.
var item = document.createElement('div');
// 并设置宽高
item.style.width = '20px';
item.style.height = '20px';
// 为了不使创建的item元素叠在一个里,用到左margin定位
// 使用左和上margin定位
item.style.marginLeft = i*20+'px';
item.style.marginTop = j*20+'px';
// 这一步是为了显示给我们看,所以采用了border的样式,实际上是background='black'
item.style.border = '1px solid black';
// 因为必须要有定位才能添加margin
item.style.position = 'absolute';
// 把每一个创建的item元素添加到文档碎片frag中(这一步是可以优化,减少网页的加载时间。可写可不写,当然写了更好)
frag.appendChild(item);
// 把item添加给一维数组中
// push只能用于给数组添加
ywsz.push(item);
}
// 把一维数组,添加到二维坐标数组中
ewszArr.push(ywsz);
}
// 获取到页面上的容器,把放有元素的文档碎片一次性添加给容器
document.querySelector('.huaBu').appendChild(frag);
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
.huaBu{
width: 400px;
height: 400px;
position: absolute;
}
</style>
</head>
<body>
<div class="huaBu"></div>
<script>
// 创建一个二维坐标数组
var ewszArr = [];
// 创建一个文档碎片,方便加载,节省时间(可写可不写,写了更好,作用是便于优化,提高加载速度)
var frag = document.createDocumentFragment();
// 为了不使创建的item叠在一行中,用到了上margin定位,
// 创建了20行,0~19.
for(var j=0; j<20; j++)
{
// 创建一个一维数组
var ywsz = [];
for(var i=0; i<20; i++){
// 每次循环就给div中创建一个item元素,创建20个,0~19.
var item = document.createElement('div');
// 并设置宽高
item.style.width = '20px';
item.style.height = '20px';
// 为了不使创建的item元素叠在一个里,用到左margin定位
// 使用左和上margin定位
item.style.marginLeft = i*20+'px';
item.style.marginTop = j*20+'px';
// 这一步是为了显示给我们看,所以采用了border的样式,实际上是background='black'
item.style.border = '1px solid black';
// 因为必须要有定位才能添加margin
item.style.position = 'absolute';
// 把每一个创建的item元素添加到文档碎片frag中(这一步是可以优化,减少网页的加载时间。可写可不写,当然写了更好)
frag.appendChild(item);
// 把item添加给一维数组中
// push只能用于给数组添加
ywsz.push(item);
}
// 把一维数组,添加到二维坐标数组中
ewszArr.push(ywsz);
}
// 获取到页面上的容器,把放有元素的文档碎片一次性添加给容器
document.querySelector('.huaBu').appendChild(frag);
</script>
</body>
</html>