javascript实现围棋界面

最新推荐文章于 2025-07-22 12:53:34 发布

原创最新推荐文章于 2025-07-22 12:53:34 发布 · 2.2k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #div #function #float #xhtml

JavaScript学习专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的围棋界面，通过动态创建HTML元素来绘制棋盘和棋子，并为棋盘上的每个交叉点添加了点击事件以实现落子功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascript实现围棋界面</title> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> body{margin:0;padding:0;background:white;} /*最外层边线*/ #go{position:absolute;margin:50px;width:640px;height:640px;border:solid 5px Green;background-color:#a0a0a0;} /**/ #line{position:absolute;width:540px;left:50px;top:50px;border:solid 2px #000;} /*棋盘是由19*19个有边线的div组成,所以div相交的地方是双线,边上是单线 28*18=560-56=504是div宽度,18*2=36是线宽,总宽度为540 */ #line div{float:left;width:28px;height:28px;border:solid 1px #000;color:White;background-color:#fdcb6b} /*交叉点位置用隐藏的div,交叉点div宽高为30,与线交叉点间距为15,再减去line的线宽2 即50-(15-2) */ #grid{position:absolute;width:590px;left:37px;top:37px;} /*这里的宽度大于line似乎不太好*/ #grid div{float:left;width:30px;height:30px;line-height:30px;text-align:center;color:#000;cursor:pointer;font-size:30px;} </style> </head> <body> <div id="go"> <div id="line"></div> <div id="grid"></div> </div> </body> </html>