JavaScript五子棋效果
分类：实例代码
点击方格可以实现下子的效果，不过这不是一个游戏，我们并不能真正玩。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
table {
width: 700px;
height: 700px;
margin: 6% auto;
border-collapse: collapse;
background: #EEE9E9;
box-shadow: 0px 0px 5px #000000;
}
td {
width: 69px;
height: 69px;
border: 1px solid red;
}
.div2 {
width: 100%;
height: 100%;
background: #000000;
border-radius: 50%;
box-shadow: 0px 0px 20px #888888;
}
.div3 {
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 10px #888888;
}
</style>
<script>
window.onload = function() {
var tdEle = document.querySelectorAll('tr td')
var aa = false
for (var index = 0; index < tdEle.length; index++) {
tdEle[index].onclick = function () {
if (aa == false) {
if (this.className == '') {
qipan('div2')
this.className = 'fff000'
this.appendChild(divE)
aa = true
}
} else {
if (this.className == '') {
qipan('div3')
this.className = 'red'
this.appendChild(divE)
aa = false
}
}
}
}
function qipan(classEle) {
divE = document.createElement('div')
divE.className = classEle
}
}
</script>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
JavaScript五子棋效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript五子棋效果就介绍到这了。
JavaScript五子棋效果属于前端实例代码，有关更多实例代码大家可以查看。