PHP棋盘如何改变颜色 - PHP chessboard how to change colors?

我对PHP还是个新手我需要为学校做一个棋盘。我使用选项让他们选择板的颜色。目前我得到的是1/2总是白色的。但我卡住的地方是，我如何使PHP识别他们选择的颜色，并使棋盘的颜色。我也不确定我是否需要使用CSS，请帮助我，我卡住了。

<!DOCTYPE html>
<html>
    <head>
        <title>Schaakbord</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="schaakbord.css">
    </head>
    <body>  
        <form action="" method="GET">
            <select name="kleuren">
                <option name="kleur" value="geel">Geel</option>
                <option name="kleur" value="rood">Rood</option>
                <option name="kleur" value="blauw">Blauw</option>
                <option name="kleur" value="groen">Groen</option>
                <option name="kleur" value="paars">Paars</option>
                <option name="kleur" value="roze">Roze</option>
                <option name="kleur" value="bruin">Bruin</option>                       
                <option name="kleur" value="oranje">Oranje</option>             
                <option name="kleur" value="wit">Wit</option>
                <option name="kleur" value="grijs">Grijs</option>
            </select>
            <input type="submit" name="submit">
        </form>
        <br/>
        <?php
            if(isset($_GET["submit"])){
                echo "<table>";
                for($i=0;$i<8;$i++)
                {
                    echo "<tr>";
                    for($u=0;$u<8;$u++)
                    {
                        if(($i + $u)%2 == 0o)
                        {
                            echo "<td></td>";
                        }
                        else {
                            echo "<th></th>";
                        }
                    }
                    echo "</tr>";
                }
                echo "</table>";
            }
        ?>
    </body>
</html>

body    {
    background-color:black;
}
td  {
    width:50px;
    height:50px;
    background-color:red;
}
th  {
    width:50px;
    height:50px;
    background-color:white;
}

这样就可以了:

<!DOCTYPE html>
<html>
<head>
    <title>Schaakbord</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="schaakbord.css">
</head>
<body>
<form action="" method="GET">
    <select name="kleuren">
        <option name="kleur" value="yellow">Geel</option>
        <option name="kleur" value="red">Rood</option>
        <option name="kleur" value="blue">Blauw</option>
        <option name="kleur" value="green">Groen</option>
        <option name="kleur" value="purple">Paars</option>
        <option name="kleur" value="pink">Roze</option>
        <option name="kleur" value="brown">Bruin</option>
        <option name="kleur" value="orange">Oranje</option>
        <option name="kleur" value="with">Wit</option>
        <option name="kleur" value="gray">Grijs</option>
    </select>
    <input type="submit" name="submit">
 </form>
 <br/>
<?php
     if(isset($_GET["submit"])){
           echo "<table>";
           for($i=0;$i<8;$i++)
           {
              echo "<tr>";
              for($u=0;$u<8;$u++)
              {
                 if(($i + $u)%2 == 0)
                 {
                   echo "<td style='background-color:".$_GET["kleuren"]."'></td>";
                 }
                 else {
                     echo "<th></th>";
                 }
            }
            echo "</tr>";
     }
    echo "</table>";
 }
 ?>
 </body>
 </html>

与其将电路板分成<td>和<th>，不如使用class:

if(($i + $u)%2 == 0)
{
    echo "<td class="color"></td>";
}
else
{
    echo "<td class="white"></td>";
}

然后在css中，根据class:

改变颜色

td {
   width:50px;
   height:50px;
}
td.color {
   background-color: <?php echo $GET['kleur'];?>;
}
td.white {
   background-color: white;
}

注意:选项元素设置的值需要是有效的css颜色

最好使用css classname选择器:https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

你也可以使用偶数和奇数选择器:https://www.w3.org/Style/Examples/007/evenodd.en.html

示例:纯css棋盘与div &没有类或id，可能吗?

为每种颜色创建一个CSS类，以该颜色命名，并在提交后使用该类

CSS

body    {
    background-color:black;
}
td  {
    width:50px;
    height:50px;
}
th  {
    width:50px;
    height:50px;
    background-color:white;
}
.white { background-color:white; }
.red { background-color:red; }
.....

表

                $color = $_GET["kleuren"];
                for($u=0;$u<8;$u++)
                {
                    if(($i + $u)%2 == 0)
                    {
                        echo "<td class='".$class."'></td>";
                    }
                    else {
                        echo "<th></th>";
                    }
                }

按照我的方法，你可以添加更多的颜色(十六进制值)

<!DOCTYPE html>
<html>
    <head>
        <title>Schaakbord</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="schaakbord.css">
    </head>
    <body>  
        <form action="" method="GET">
            <select name="kleuren">
                <option value="#8B0000">Red</option>
                <option value="#483D8B">Blue</option>
                <option value="#228B22">Green</option>
                <option value="#FF69B4">Pink</option>
            </select>
            <input type="submit" name="submit">
        </form>
        <br/>
        <?php
                echo "<table>";
                for($i=0;$i<8;$i++)
                {
                    echo "<tr>";
                    for($u=0;$u<8;$u++)
                    {
                        if(($i + $u)%2 == 0)
                        {
                            echo "<td class='color'></td>";
                        }
                        else {
                            echo "<td class='white'></th>";
                        }
                    }
                    echo "</tr>";
                }
                echo "</table>";
        ?>
    </body>
</html>
<?php
if(isset($_GET["submit"])){
    $color = $_GET['kleuren'];
}else{
    $color = "red";
}
?>
<style type="text/css">
body    {
    background-color:black;
}
.color  {
    width:50px;
    height:50px;
    background-color:<?php echo $color; ?>;
}
.white  {
    width:50px;
    height:50px;
    background-color:white;
}
</style>