js制作一个棋盘

最新推荐文章于 2023-07-12 14:51:20 发布

马优晨

最新推荐文章于 2023-07-12 14:51:20 发布

阅读量3.7k

点赞数

分类专栏：前端开发小技巧文章标签： js制作一个棋盘 js制作一个国际象棋 js制作一个象棋 js制作棋盘 js制作棋

本文链接：https://blog.csdn.net/qq_24147051/article/details/89203061

版权

前端开发同时被 2 个专栏收录

229 篇文章 26 订阅

订阅专栏

小技巧

133 篇文章 4 订阅

订阅专栏

在这里插入图片描述

如上图所示，点击加号和减号，棋盘内会出现不同的值。

代码如下，很简单，不懂的话，直接问我就行。

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>国际象棋棋盘</title>
      <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
      <div class="self-chess">
        <div id="chess"></div>
      </div>
      <div class="step">
        <div class="minus" id="minus">-</div>
        <div class="step-count">Round 12</div>
        <div class="add" id="add">+</div>
      </div>
      <script type="text/javascript">
        var str = "<table cellpadding='0' cellspacing='0'>";
        var off = true;
        for (i = 1; i <= 4; i++) {
          str += "<tr>";
          for (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>";
        document.getElementById("chess").innerHTML = str;
        document.getElementById("add").addEventListener('click', function () {
          clearTable();
          document.getElementsByTagName("table")[0].rows[0].cells[0].innerHTML = "123"
          document.getElementById("chess").firstChild.rows[2].cells[3].innerHTML = "789"
          document.getElementById("chess").firstChild.rows[3].cells[4].innerHTML = "999"
        });
        document.getElementById("minus").addEventListener('click', function () {
          clearTable();
          document.getElementsByTagName("table")[0].rows[3].cells[0].innerHTML = ""
          document.getElementById("chess").firstChild.rows[2].cells[3].innerHTML = "333"
          document.getElementById("chess").firstChild.rows[1].cells[4].innerHTML = "999"
        });
    
        function clearTable() {
          var tab = document.getElementsByTagName("table")[0];
          for (var i = 0; i < tab.rows.length; i++) {
            for (var j = 0; j < tab.rows.item(i).cells.length; j++) {
              tab.rows.item(i).cells[j].innerHTML = "";
            }
          }
        }
      </script>
    
      <style type="text/css">
        .self-chess {
          display: flex;
          justify-content: center;
          margin-top: 40px;
          -webkit-transform: translateZ(25px);
          transform: rotateX(5.2deg) rotateY(0.3deg);
        }
    
        table {
          border: 1px solid #000;
          text-align: center;
        }
    
        td {
          width: 50px;
          height: 50px;
        }
    
        .td01 {
          background: #fff;
          color: #333;
        }
    
        .td02 {
          background: #000;
          color: #fff;
        }
    
        .step {
          display: flex;
          justify-content: space-evenly;
          height: 40px;
          line-height: 40px;
          margin-top: 15px;
        }
    
        .minus,
        .add {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          text-align: center;
          background: #172632;
          color: #fff;
          font-size: 15px;
        }
      </style>
    </head>
    
    <body>
    </body>
    
    </html>

马优晨

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js制作一个棋盘

如上图所示，点击加号和减号，棋盘内会出现不同的值。代码如下，很简单，不懂的话，直接问我就行。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>国际象棋棋盘</title> <meta name="viewport" con...
复制链接

扫一扫