用JS+CSS画一个棋盘格的思路和方法是什么
导读：这篇文章给大家分享的是“用JS+CSS画一个棋盘格的思路和方法是什么”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“用JS+CSS画一个棋盘格的思路和方法是什么”吧。...
这篇文章给大家分享的是“用JS+CSS画一个棋盘格的思路和方法是什么”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“用JS+CSS画一个棋盘格的思路和方法是什么”吧。在这篇文章中，我将展示如何使用 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 的帮助下在这些部分标签内动态附加元素。
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+CSS画一个棋盘格的思路和方法是什么内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用JS+CSS画一个棋盘格的思路和方法是什么
本文地址： https://pptw.com/jishu/654497.html