本文介绍了如何使用CSS Flex-box布局与nth-child()伪类选择器，结合JavaScript动态生成DOM元素，实现棋盘格的绘制。通过区分奇偶行容器及子元素颜色，展示了前端基础技术在实际图形构建中的应用。
本文将演示如何结合CSS样式与JavaScript脚本，完成棋盘格的设计与绘制。
实现该效果需要掌握CSS Flex-box弹性盒子布局以及:nth-child()伪类选择器的基本用法。
接下来开始具体实现过程。
实现思路
核心思路是为偶数行设置名为containerEven的父容器类，为奇数行设置名为containerOdd的父容器类。
相关的CSS样式代码如下。
.containerEven>div:nth-child(odd) {
background-color: white;
}
.containerEven>div:nth-child(even) {
background-color: black;
}
.containerOdd>div:nth-child(odd) {
background-color: black;
}
.containerOdd>div:nth-child(even) {
background-color: white;
}HTML结构部分如下所示。
<div class="parent-class">
<section class="containerEven" id='container1'></section>
<section class="containerOdd" id='container2'></section>
<section class="containerEven" id='container3'></section>
<section class="containerOdd" id='container4'></section>
<section class="containerEven" id='container5'></section>
<section class="containerOdd" id='container6'></section>
<section class="containerEven" id='container7'></section>
<section class="containerOdd" id='container8'></section>
</div>剩余部分需利用JavaScript，通过对应的元素ID，在指定的section标签内动态追加子元素。
var res1 = [], res2 = [], res3 = [], res4 = [], res5 = [], res6 = [], res7 = [], res8 = [];
for (i = 1; i <= 8; i++) {
res1 += `<div class="item"></div>`
res2 += `<div class="item"></div>`
res3 += `<div class="item"></div>`
res4 += `<div class="item"></div>`
res5 += `<div class="item"></div>`
res6 += `<div class="item"></div>`
res7 += `<div class="item"></div>`
res8 += `<div class="item"></div>`
}
document.getElementById(`container1`).innerHTML = res1;
document.getElementById(`container2`).innerHTML = res2;
document.getElementById(`container3`).innerHTML = res3;
document.getElementById(`container4`).innerHTML = res4;
document.getElementById(`container5`).innerHTML = res5;
document.getElementById(`container6`).innerHTML = res6;
document.getElementById(`container7`).innerHTML = res7;
document.getElementById(`container8`).innerHTML = res8;具体做法是使用8个数组分别存储每一行的数据字符串，获取数据后将其追加到对应的容器ID中。
完整代码
以下是包含运行输出的完整代码示例。
<style>
.parent-class {
border: 5px chocolate groove;
}
.containerEven,
.containerOdd {
display: flex;
background-color: dodgerblue;
}
.item {
background-color: #f1f1f1;
padding: 20px;
font-size: 30px;
flex: 1;
height: 50px;
text-align: center;
}
.containerEven>div:nth-child(odd) {
background-color: white;
}
.containerEven>div:nth-child(even) {
background-color: black;
}
.containerOdd>div:nth-child(odd) {
background-color: black;
}
.containerOdd>div:nth-child(even) {
background-color: white;
}
</style>
<div class="parent-class">
<section class="containerEven" id='container1'></section>
<section class="containerOdd" id='container2'></section>
<section class="containerEven" id='container3'></section>
<section class="containerOdd" id='container4'></section>
<section class="containerEven" id='container5'></section>
<section class="containerOdd" id='container6'></section>
<section class="containerEven" id='container7'></section>
<section class="containerOdd" id='container8'></section>
</div>
<script>
var res1 = [], res2 = [], res3 = [], res4 = [], res5 = [], res6 = [], res7 = [], res8 = [];
for (i = 1; i <= 8; i++) {
res1 += `<div class="item"></div>`
res2 += `<div class="item"></div>`
res3 += `<div class="item"></div>`
res4 += `<div class="item"></div>`
res5 += `<div class="item"></div>`
res6 += `<div class="item"></div>`
res7 += `<div class="item"></div>`
res8 += `<div class="item"></div>`
}
document.getElementById(`container1`).innerHTML = res1;
document.getElementById(`container2`).innerHTML = res2;
document.getElementById(`container3`).innerHTML = res3;
document.getElementById(`container4`).innerHTML = res4;
document.getElementById(`container5`).innerHTML = res5;
document.getElementById(`container6`).innerHTML = res6;
document.getElementById(`container7`).innerHTML = res7;
document.getElementById(`container8`).innerHTML = res8;
</script>效果展示
以上就是关于JS+CSS绘制棋盘格的示例代码的全部内容，更多关于JS棋盘格的内容可搜索本站往期文章或继续浏览相关文章，感谢支持。