Question

对于PHP来说，我是新手我需要为学校制作一个棋盘。我正在使用选项让他们选择电路板的颜色。到目前为止我所拥有的是一半是白色的。但是我被困在哪里是如何让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;
}

Answer 1

而不是将电路板拆分为<td>和<th>使用类：

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

然后在你的css中，根据类改变颜色：

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

注意：选项元素设置的值必须是有效的css颜色

Answer 2

如果您使用css类名选择器，那就更好了：https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

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

此处示例：Pure css Chessboard with div & no classes or ids, is it possible?

Answer 3

为每种颜色创建一个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>";
                    }
                }

Answer 4

按照这种方式，我可以添加更多颜色（十六进制值）

<!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>

Answer 5

这种方式可行：

type alias Model =
  { users : List User
  , isLoading : Bool
  }

type alias User =
  { title : String
  , username : String
  , email : String
  }

PHP棋盘如何改变颜色？

5 个答案: