JS+CSS+HTML绘制国际象棋棋盘

马黑黑 · 发表于 2022-10-17 21:54

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-10-17 21:54

本帖最后由马黑黑于 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 21:56

本帖最后由马黑黑于 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;