Javascript-DOM翻转棋
先贴代码，后加效果图：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>Dom翻转棋</title> 5 <style type = "text/css"> 6 #chessBoard { 7 position:absolute; 8 top:150px; 9 left:200px; 10 border: 1px; 11 } 12 td { 13 width:40px; 14 height:40px; 15 cursor:pointer; 16 border: 1px; 17 border-collapse:collapse; 18 border-color: #06F; 19 } 20 </style> 21 <script type = "text/javascript"> 22 function init() { 23 var tds = document.getElementsByTagName("td"); 24 for (var i = 0; i < tds.length; i++) { 25 tds[i].style.backgroundColor = '#CCC'; //‘#06F’代表的颜色是‘#0066FF'，相应rgb，"rgb(0, 102, 255)" 26 tds[i].onclick = function () { 27 td_OnClick(this); 28 } 29 } 30 } 31 32 function td_OnClick(who) { 33 var index = -1; 34 for (var i=0; i<who.parentNode.childNodes.length; i++) { 35 if (who == who.parentNode.childNodes[i]) { 36 index = i; //获取标记在一行中的编号 37 break; 38 } 39 } 40 var left = who.previousSibling; 41 var right = who.nextSibling; 42 //注意DOM中<tr>之间有空文本节点 43 var down = who.parentNode.nextSibling.nextSibling ? who.parentNode.nextSibling.nextSibling.childNodes[index] : null; 44 var up = who.parentNode.previousSibling.previousSibling ? who.parentNode.previousSibling.previousSibling.childNodes[index] : null; 45 //javascript的脚本只能识别string类型的颜色变量，要不就转换。但是JS输入却是用16进制的#颜色，最方便 46 if (left) left.style.backgroundColor = (left.style.backgroundColor == "rgb(0, 0, 0)" ? '#CCC' : '#000'); 47 if (right) right.style.backgroundColor = (right.style.backgroundColor == "rgb(0, 0, 0)" ? '#CCC' : '#000'); 48 if (down) down.style.backgroundColor = (down.style.backgroundColor == "rgb(0, 0, 0)" ? '#CCC' : '#000'); 49 if (up) up.style.backgroundColor = (up.style.backgroundColor == "rgb(0, 0, 0)" ? '#CCC' : '#000'); 50 } 51 </script> 52 </head> 53 <body onload="init()"> 54 <h1>Dom翻转棋，欢迎挑战</h1> 55 <table id = "chessBoard"> 56 <tbody> 57 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 58 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 59 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 60 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 61 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 62 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 63 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 64 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 65 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 66 <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> 67 </tbody> 68 </table> 69 70 </body> 71 </html>
