9. 显示国际象棋棋盘

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

天码行空

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

阅读量384

点赞数

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

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

版权

程序算法专栏收录该内容

17 篇文章 3 订阅

订阅专栏

程序书算法精题–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>