<html> <head> <meta charset="UTF-8"> <style> body { background:skyblue; } table { margin:20px auto; } td { width: 36px; height: 36px; border: 1px solid #FFF; } .heiqi { width:30px; height:30px; border-radius:50%; background:#000; margin:0px auto; } .baiqi { width:30px; height:30px; border-radius:50%; background:#FFF; margin:0px auto; } </style> <script> //while,do while , for document.write("<table cellpadding=0 cellspacing=0>"); for(var i = 0;i < 15;i++){ document.write("<tr>"); for(var j = 0;j < 15;j++){ document.write("<td onclick=\"luozi(this)\"></td>"); } document.write("</tr>"); } document.write("</table>"); var flag = true; function luozi(dom){ if(flag){ dom.innerHTML = "<div class='heiqi'></div>"; flag = false; }else{ dom.innerHTML = "<div class='baiqi'></div>"; flag = true; } //为了防止已经落子的格子继续触发点击事件，所以取消该点击事件 dom.onclick = ""; } </script> </head> <body> </body> </html>
