JS+CSS+HTML绘制国际象棋棋盘
<style>#checkerBoard {
margin: 20px auto;
position: relative;
width: 400px;
height: 400px;
border: 2px solid black;
display: grid;
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(8, 1fr);
}
</style>
<div id="checkerBoard"></div>
<script>
let html_str = '', idx, bg_color;
for(j=0; j<8; j++) {
for(k=0; k<8; k++) {
idx = k + 1 + j * 8;
if(j % 2 === 0) {
bg_color = k % 2 === 0 ? 'snow' : 'black';
} else {
bg_color = k % 2 === 0 ? 'black' : 'snow';
}
html_str += `<span style='background: ${bg_color};'></span>`;
}
}
checkerBoard.innerHTML += html_str;
</script>
本帖最后由 马黑黑 于 2022-10-17 22:06 编辑
代码：
<style>
#checkerBoard {
margin: 20px auto;
position: relative;
width: 400px;
height: 400px;
border: 2px solid black;
display: grid;
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(8, 1fr);
}
</style>
<div id="checkerBoard"></div>
<script>
let html_str = '', bg_color;
for(j=0; j<8; j++) {
for(k=0; k<8; k++) {
if(j % 2 === 0) {
bg_color = k % 2 === 0 ? 'snow' : 'black';
} else {
bg_color = k % 2 === 0 ? 'black' : 'snow';
}
html_str += `<span style='background: ${bg_color};'></span>`;
}
}
checkerBoard.innerHTML += html_str;
</script>
本帖最后由 马黑黑 于 2022-10-17 22:02 编辑
解释：
国际象棋棋盘整体是一个正方形，其内由 8*8=64 个黑白（或深色、浅色）相间的格子组成。网格布局画这个正合适，当然，64个子元素一一去规范和绘制非常繁琐（我们已经画过），这里为了效率，可以考虑用JS配合完成，不用grid嵌套，代码更简洁。
第一步：设定棋盘CSS样式
#checkerBoard {
width: 400px; /* 棋盘宽度 /*
height: 400px; /* 棋盘高度 */
border: 2px solid black; /* 棋盘边框 */
display: grid; /* 定义网格布局 */
grid-template-rows: repeat(8, 1fr); /* 8行8等分 */
grid-template-columns: repeat(8, 1fr); /* 8列8等分 */
}
第二部：写出HTML代码
<div id="checkerBoard"></div>
第三部：用 JS 写出所有子项目
// 声明两个变量 ① html_str 变量用以装载子项目即 span 标签代码字符串 ② bg_color 用以装载背景色字符串
let html_str = '', bg_color;
/*
用双 for 循环遍历所有64个格子
第一层循环 ：行循环 步进变量 j
*/
for(j=0; j<8; j++) {
// 第二层循环 ：列循环 步进变量 k
for(k=0; k<8; k++) {
// 如果行数序号 j 被 2 整除
if(j % 2 === 0) {
// 如果列序号 k 被 2 整除则背景色为 snow 否则 black
bg_color = k % 2 === 0 ? 'snow' : 'black';
// 否则，如果行数序号 j 不被 2 整除
} else {
// 如果列序号 k 被 2 整除则背景色为 black 否则 snow
bg_color = k % 2 === 0 ? 'black' : 'snow';
}
// 每一次循环都将字串拼接起来
html_str += `<span style='background: ${bg_color};'></span>`;
}
}
// 最后将拼接的字串放入 checkerBoard 中
checkerBoard.innerHTML += html_str; 加入JS立即变简便了呢，不需要写8遍div了{:4_173:} 红影 发表于 2022-10-17 21:59
加入JS立即变简便了呢，不需要写8遍div了
首先不需要 grid 嵌套，其次不需要那么多的 css 类选择器。不过JS也是要写 64 个 span 标签的 马黑黑 发表于 2022-10-17 21:56
解释：
国际象棋棋盘整体是一个正方形，其内由 8*8=64 个黑白（或深色、浅色）相间的格子组成。网格布局 ...
这个JS设计很巧妙，只判断是奇数偶数就能把64个格子都填满了{:4_199:} 红影 发表于 2022-10-17 22:02
这个JS设计很巧妙，只判断是奇数偶数就能把64个格子都填满了
判断奇偶的作用是给格子着色，如果仅仅画64个格子那会更简单 红影 发表于 2022-10-17 22:02
这个JS设计很巧妙，只判断是奇数偶数就能把64个格子都填满了
双循环，这个貌似你还未能通过{:4_173:} 本帖最后由 起个网名好难 于 2022-10-18 11:51 编辑
/**
if(j % 2 === 0) {
bg_color = k % 2 === 0 ? 'snow' : 'black';
} else {
bg_color = k % 2 === 0 ? 'black' : 'snow';
}
**/
bg_color = (j+k) % 2 ? 'snow' : 'black';
马黑黑 发表于 2022-10-17 22:01
首先不需要 grid 嵌套，其次不需要那么多的 css 类选择器。不过JS也是要写 64 个 span 标签的
它是指挥机器去写的啊，不需要人一个个动手去写了{:4_173:} 马黑黑 发表于 2022-10-17 22:03
判断奇偶的作用是给格子着色，如果仅仅画64个格子那会更简单
是啊，如果不是为了着色，不用JS也没那么繁琐。 马黑黑 发表于 2022-10-17 22:04
双循环，这个貌似你还未能通过
是啊，前面就没想明白，后就没没再去想{:4_173:} 红影 发表于 2022-10-18 12:21
是啊，前面就没想明白，后就没没再去想
多个for语句循环很常用 红影 发表于 2022-10-18 12:21
是啊，如果不是为了着色，不用JS也没那么繁琐。
但 8 个div 、每个 div 8 个 span 总是要写的 红影 发表于 2022-10-18 12:19
它是指挥机器去写的啊，不需要人一个个动手去写了
要给指令 起个网名好难 发表于 2022-10-18 07:48
这个简化初学者看不懂，所以暂时不用那么简洁的 马黑黑 发表于 2022-10-18 12:27
多个for语句循环很常用
一个循环完了，再一个。呵呵，我总绕不过弯来{:4_173:} 马黑黑 发表于 2022-10-18 12:28
但 8 个div 、每个 div 8 个 span 总是要写的
哦哦，也是呢。 马黑黑 发表于 2022-10-18 12:28
要给指令
指令比一个个写要简单多了，也不一定简单，但代码少多了{:4_173:} 红影 发表于 2022-10-18 16:16
指令比一个个写要简单多了，也不一定简单，但代码少多了
算法很重要。先会基本的算法，因为基本的才是好理解的