javascript簡單寫出國際象棋棋盤


  關於昨天的一個作業,做了一個國際象棋的棋盤,效果圖如下

 

  這里的思路是根據off=true的值進行反轉來判斷單元格的顏色。

  就那第一行來說,當條件語句if的off=true則輸出str+='<td class="td01"></td>';,然后off=!off進行反轉,得到off=false。在下一次循環條件語句if的off=false,則輸出str+='<td class="td02"></td>';,然后off=!off再進行反轉,如此反復。

  當里面的for循環完畢,off=!off再進行反轉。

 

代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>國際象棋棋盤</title>
        <script type="text/javascript">
            var str="<table cellpadding='0' cellspacing='0'>";
            var off=true;
            for(i=1;i<=8;i++){
                str+="<tr>";
                for(j=1;j<=8;j++){
                    if(off){
                        off=!off;
                        str+='<td class="td01"></td>';
                    }
                    else{
                        off=!off;
                        str+='<td class="td02"></td>';
                    }
                }
                off=!off;
                str+="</tr>";
            }
            str+="</table>";
            document.write(str);
        </script>
        
        <style type="text/css">
            table{
                border: 1px solid #000;
            }
            td{
                width: 100px;
                height: 100px;
                background: #ff0;
            }
            .td01{
                background: #fff;
            }
            .td02{
                background: #000;
            }
        </style>
    </head>
    <body>
    </body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM