<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>js五子棋效果</
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
>