站长资源
全栈工程师站点

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

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

双层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,再赋予他们不同的样式,上述代码得到如图所示

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

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

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

得到如图所示:

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

通过上面两幅图片我们可以得知,假如一个循环体让他们的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的黑白相间方格

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


在线演示  
×

站长资源极速下载通道: JS双重for循环实例讲解,如何制作一个黑白相间的方格

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » JS双重for循环实例讲解,如何制作一个黑白相间的方格

评论 抢沙发

评论前必须登录!