顏色和尺寸變化的國際象棋棋盤（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