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 个答案: