關於昨天的一個作業,做了一個國際象棋的棋盤,效果圖如下
這里的思路是根據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>