颜色和尺寸变化的国际象棋棋盘（JS和PHP）

Question

我正在用HTML，CSS，JS和PHP编写一个简单的棋盘。 我想将自定义颜色添加到偶数和奇数正方形以及自定义尺寸（高度和宽度）。 我想用这种方式来做，但是不起作用。 这是我即将参加的考试的任务，因此对您的帮助将不胜感激。 先感谢您。

<html> 
  <body>
    Select first color: 
    <select id="mySelect" onChange="changeColor(value);">
      <option value="black">Black</option>
      <option value="blue">Blue</option>
      <option value="yellow">Yellow</option>
      <option value="orange">Orange</option>
    </select>
      <br><br>
    Select second color: 
    <select id="mySelect2" onChange="changeColor2(value);">
      <option value="white">White</option>
      <option value="brown">Brown</option>
      <option value="red">Red</option>
      <option value="purple">Purple</option>
    </select>
      <br><br>
    Dimensions value:
    <input type="number" id="dimensions">
    <button type="button" onClick="changeDim">Hajde</button>
   <table width="270px" cellspacing="0px" cellpadding="0px" border="1px">
      <?php
      for($row=1;$row<=8;$row++)
      {
          echo "<tr>";
          for($col=1;$col<=8;$col++)
          {
          $total=$row+$col;
          if($total%2==0)
          {
          echo "<td id='even'></td>";
          }
          else
          {
          echo "<td id='odd'></td>";
          }
          }
          echo "</tr>";
      }
      ?>
  </table>
      <script>
        function changeColor(color) {
        var x = document.getElementById("mySelect").selectedIndex;
        document.getElementById("par").style.background = color;
        }
        function changeColor2(color) {
        var x = document.getElementById("mySelect2").selectedIndex;
        document.getElementById("par").style.background = color;
        }
        function changeDim() {
        var px = "px";
        var dimension = document.getElementById("dimensions").value + px;
        document.getElementById("even").style.height = dimension;
        document.getElementById("even").style.width = dimension;
        document.getElementById("odd").style.height = dimension; 
        document.getElementById("odd").style.width = dimension;  
        }
      </script>
  </body>
  </html>

Answer 1

我相信您只希望能够访问偶数或奇数平方。 如果仅更改样式，则可以使用CSS进行此操作。

您可以在桌子上做类似的事情。 自从您说这是用于国际象棋棋盘以来，它还将翻转以在行上进行偶数和奇数运算。

td {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
tr:nth-child(odd) td:nth-child(odd){
  background-color: black;
}

tr:nth-child(even) td:nth-child(even){
  background-color: black;
}

希望这可以帮助。 祝好运！ 快速前 https://jsfiddle.net/1c0b2ff0/5/

颜色和尺寸变化的国际象棋棋盘（JS和PHP）

问题描述

1 个解决方案

解决方案1
0

颜色和尺寸变化的国际象棋棋盘（JS和PHP）

问题描述

1 个解决方案

解决方案1 0

解决方案1
0