JS双重for循环实例讲解，如何制作一个黑白相间的方格

双层for循环在JS入门中还是比较难理解的，常见的九九乘法表相信大家都练习过，今天我们用双层for循环来输出一个黑白相间的方格，帮助大家加深印象。

先写一个简单的html结构:

<div>
	<ul id="bg"></ul>
</div>

加上适当的CSS代码：

* {
	margin:0;
	padding:0;
}
ul li {
	margin:0;
	padding:0;
	list-style:none;
}
#bg {
	width:500px;
	height:500px;
	position:relative;
	border:solid 1px #000;
	margin:0 auto;
}
.bai {
	background:white;
	width:50px;
	height:50px;
	position:absolute;
}
.hei {
	background:#000;
	width:50px;
	height:50px;
	position:absolute;
}

然后我们来写一个单层for循环，创建li标签插入到id=”bg”中

var bg = document.querySelector('#bg');
for (var i = 0; i < 10; i++) {
	var li = document.createElement('li');
	if (i % 2 == 0) {
		li.className = 'hei';
	} else {
		li.className = 'bai';
	}
	bg.append(li);
	li.style.top = i * 50 + "px";
}

因为只是一层循环体，这段代码并不难理解，我们创建了li标签，然后取模2，再赋予他们不同的样式，上述代码得到如图所示

然后我们把最后一句代码改为

li.style.left = i * 50 + "px";

得到如图所示：

通过上面两幅图片我们可以得知，假如一个循环体让他们的top值不断的更新，那么再有一个循环体让他们的left值不断的更新，就可以得到我们想要的结果。

既然分析出来了，那我们就再来个一模一样的循环体

var bg = document.querySelector('#bg');
for (var j = 0; j < 10; j++) {
	var li = document.createElement('li');
	if (j % 2 == 0) {
		li.className = 'hei';
	} else {
		li.className = 'bai';
	}
	bg.append(li);
	li.style.left = j * 50 + "px";
}

我们将这个循环体放入第一个循环体中，注意条件语句里面，因为是嵌套进去，所以条件判断里面也需要嵌套

最终代码：

var bg = document.querySelector('#bg');
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
        var li = document.createElement('li');
        if (i % 2 == 0) {
            if (j % 2 == 0) {
                li.className = 'hei';
            } else {
                li.className = 'bai';
            }
        } else {
            if (j % 2 == 0) {
                li.className = 'bai';
            } else {
                li.className = 'hei';
            }
        }
        bg.append(li);
        li.style.top = i * 50 + "px";
        li.style.left = j * 50 + "px";
    }
}

然后我们就得到了10*10的黑白相间方格

本文由站长资源原创首发，转载请注明出处