9. 显示国际象棋棋盘

最新推荐文章于 2022-04-29 00:12:17 发布

天码行空

最新推荐文章于 2022-04-29 00:12:17 发布

阅读量352

点赞数

分类专栏：程序算法文章标签： javascript 算法

本文链接：https://blog.csdn.net/Ksy007/article/details/108239018

版权

程序算法专栏收录该内容

17 篇文章 2 订阅

订阅专栏

程序书算法精题–JS版

国际象棋棋盘

源码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>国际象棋棋盘</title>
  <style>
    div {
      width: 500px;
      margin: 50px auto;
    }

    table {
      border: 1px solid #000;
    }

    td {
      width: 50px;
      height: 50px;
      background: #ff0;
    }

    .td01 {
      background: #fff;
    }

    .td02 {
      background: #000;
    }
  </style>
</head>

<body>
  <script>
    let str = "<div><table cellpadding='0' cellspacing='0'>"
    let off = true
    for (let i = 1; i <= 8; i++) {
      str += '<tr>'
      for (let j = 1; j <= 8; j++) {
        if (off) {
          off = !off
          str += '<td class="td01"></td>'
        } else {
          off = !off
          str += '<td class="td02"></td>'
        }
      }
      off = !off
      str += '</tr>'
    }
    str += '</table></div>'
    document.write(str)
  </script>
</body>

</html>

运行效果

在这里插入图片描述

天码行空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
9. 显示国际象棋棋盘

程序书算法精题–JS版国际象棋棋盘源码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>国际象棋棋盘</title> <style>
复制链接

扫一扫