js编写简易的国际象棋界面

js编写简易的国际象棋界面


这里写图片描述


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
           //设置棋盘的宽高、以及边框
            document.write("<div style='width:400px;height:400px;border:1px solid #000;'>")
            //通过遍历,对棋盘中的奇数行和偶数行分别处理
            for(var i=1;i<=8;i++){
                if(i%2)
                {
                    //通过遍历,对棋盘中的奇数列和偶数列分别处理
                    for (var j=1;j<=8;j++)
                    {
                        if(j%2){
                        document.write("<div style='width:50px;height:50px;background:black;float:left'></div>")
                        }
                        else{
                        document.write("<div style='width:50px;height:50px;background:white;float:left;'></div>")
                        }
                    }
                }
                else
                {
                    for (var j=1;j<=8;j++)
                    {
                        if(j%2){
                        document.write("<div style='width:50px;height:50px;background:white;float:left;'></div>")
                       }
                        else{
                        document.write("<div style='width:50px;height:50px;background:black;float:left;'></div>")
                       }
                    }
                }
            }
            document.write("</div>")
        </script>

    </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41380430/article/details/82153019