<!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>
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
