laolunsibojue 2023-09-02 18:51 采纳率: 38.5%
浏览 31
已结题

如何使用JS实现棋盘格子颜色互换

用JS实现一个效果
点击 “变色” 按钮后，棋盘内相邻的格子颜色互换，红色变成黑色，黑色变成红色

img


但是我设置的代码点击 '变色' 按钮后，却变成了这种隔行变色的效果

img

img

img


我是用createElement属性创造了400个div格子元素放到oBox框子元素中的
本人初学JS，实在想不明白。请问您们知道该怎么做这种效果吗？

  • 写回答

8条回答 默认 最新

  • 语言-逆行者 2023-09-02 19:18
    关注

    修改后：

    • 你的代码中，点击按钮后会根据index的值来判断当前要变成哪种颜色的棋盘。如果index是偶数，就将偶数索引位置的格子变成红色，奇数索引位置的格子变成黑色；如果index是奇数，就将偶数索引位置的格子变成黑色，奇数索引位置的格子变成红色。

    • 修改后的代码段中，点击按钮后会遍历所有的格子，如果格子的背景颜色是红色，则将其变成黑色，反之如果是黑色，则将其变成红色。该代码段没有使用index来控制具体变换的颜色，而是根据格子原本的颜色来进行切换。

    img

    img

    <!DOCTYPE html>
<html>
<head>
  <title>棋盘变色</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
  
    #box {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -200px;
      border: 1px solid black;
    }
  
    #box > div {
      width: 20px;
      height: 20px;
      float: left;
    }
  
    #Btn {
      width: 80px;
      height: 30px;
      font-size: 15px;
      letter-spacing: 1px;
      position: absolute;
      top: 40%;
      left: 30%;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <input type="button" name="colorBtn" id="Btn" value="变色">
  
  <script type="text/javascript">
    var oBox = document.getElementById('box');
    var index = 0;
    
    for (var i = 0; i < 400; i++) {
      var oDiv = document.createElement('div');
      oBox.appendChild(oDiv);
      
      if (Math.floor(i / 20) % 2 == 0) {
        if (i % 2 == 0) {
          oDiv.style.background = 'red';
        } else {
          oDiv.style.background = 'black';
        }
      } else {
        if (i % 2 == 0) {
          oDiv.style.background = 'black';
        } else {
          oDiv.style.background = 'red';
        }
      }
    }
    
    var colorBtn = document.getElementById("Btn");
    colorBtn.onclick = function() {
      index++;
      var allDiv = oBox.getElementsByTagName('div');
      
      for (var a = 0; a < allDiv.length; a++) {
        if (allDiv[a].style.background == 'red') {
          allDiv[a].style.background = 'black';
        } else {
          allDiv[a].style.background = 'red';
        }
      }
    };
  </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(7条)

报告相同问题？

  • 编程题
    2020-07-27 21:56
    珊瑚5571的博客 } } } } 腾讯2018春招技术类编程题汇总 -1 -2 3 4或 -1 2 -3 4 -5 6的和 小Q定义了一种数列称为翻转数列:给定整数n和m, 满足n能被2m整除。对于一串连续递增整数数列1, 2, 3, 4…, 每隔m个符号翻转一次, 最初符号为...
  • AI辅助编程实战：用Cursor编辑器快速构建2048游戏
    2011-10-31 09:05
    weixin_30522183的博客 AI辅助编程正成为提升开发效率的新范式，其核心在于通过自然语言交互，将开发者的意图快速转化为可执行代码。这一过程不仅降低了项目的启动成本，更通过上下文感知和即时代码操作，实现了从概念到原型的无缝衔接。在...
  • 相见恨晚的编程学习词典！谁还不是南极滑冰的那个崽儿？！
    2020-10-01 06:22
    Thesmophoria的博客 received: 审查，复习，回顾，评论 de facto standard: 约定成俗的 spot: 地点，部位，场所，斑点，污点，点；太阳黑子；局部，地区；亮点；现货 linguistic: 语言学 ...使用一组数字符号表示数（number
  • C语言——经典200道实例【基础例题100道——进阶例题100道】
    2020-02-08 00:11
    刘鑫磊up的博客 9.要求输出国际象棋棋盘 10.打印楼梯，同时在楼梯上方打印两个笑脸 11.古典问题（兔子生崽） 12.判断101到200之间的素数 13.打印出所有的"水仙花数" 14.将一个正整数分解质因数 15.利用条件运算符...
  • JavaScript技术
    2009-06-03 15:58
    soso96的博客 ● &运算符_1.htm● ·JavaScript的脆弱性_1.htm● ·JavaScript技巧环绕三维文字_1.htm● ·JavaScript时间显示三大心法_1.htm● ·Javascript...--JavaScript的使用_1.htm● ·第八讲WEB页面信息交互_1.htm● ·第二
  • JZOJ ☆[noip2013]华容道-小数据版（bfs-广度优先搜索）
    2020-05-29 19:07
    Z__X的博客 在一个 n×m 棋盘上有 n×m 个格子，其中有且只有一个格子是空白的，其余 n×m−1 个格子上每个格子上有一个棋子，每个棋子的大小都是 1×1的； 有些棋子是固定的，有些棋子则是可以移动的； 任何与
  • CTF-密码学相关
    2019-09-09 20:30
    AbyssssssssssS的博客 10.brainfuck编程语言 其他 1.SHA 1/224/256/384/512 2.MD5加密 3.Adler-32校验 4.CRC校验 5.Gost加密 6.HAVAL加密算法 7.RIPEMD算法 8.Snefru散列算法 9.Tiger散列算法 10....
  • Real-Time Rendering 4th Edition 实时渲染第四版 第五章 着色基础（Shading Basics）
    2021-06-16 11:50
    Claude的羽毛的博客 我们在虚拟环境中看到的各式各样的物体，除了形状表现以外，还有各种各样的颜色，明暗。这些又是如何从数据出发表现出来的呢？本章即是从着色模型出发，开始一步步拆解着色过程中所发生的种种，展现计算机（GPU）...
  • Rust语言实现经典2048游戏项目实战
    2025-11-03 03:49
    或困的博客 2048的核心数据结构是一个 $4 \times 4$ 的整数矩阵，用于存储每个格子上的数值（如0表示空位，其余为2的幂次方）。在Rust中，最自然的方式是使用二维数组来表示该结构。由于数组大小固定且访问频繁，选用[u32;16]或...
  • c++以空格分开的输入数组_信息学奥赛基础练习（15）：多维数组一
    2020-12-05 17:11
    刘屿柠的博客 信息学编程基础练习(15)多维数组一1 矩阵交换行【描述】给出一个5*5的矩阵(数学上，一个r×c的矩阵是一个由r行c列元素排列成的矩形阵列)，请将第n行和第m行交换，输出交换后的结果。【输入】输入一共6行，其中前5...
  • MPlayer
    2013-12-12 14:52
    weinyZhou的博客 它不仅可以使用 X11, Xv, DGA, OpenGL, SVGAlib, fbdev, AAlib, libcaca, DirectFB, Quartz, Mac OS X CoreVideo, 也能使用 GGI, SDL (及它们的所有驱动), 所有 VESA 兼容显卡上的 VESA (甚至不需要 X11), 某些低级...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 9月11日
  • 已采纳回答 9月3日
  • 修改了问题 9月2日
  • 创建了问题 9月2日