javascript简单写出国际象棋棋盘
Posted mumushi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
以上是关于javascript简单写出国际象棋棋盘的主要内容,如果未能解决你的问题,请参考以下文章