<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
</head>
<style>
table{
width:
700px;
height:
700px;
background:
aliceblue;
box-shadow:
cadetblue;
margin:
6%
auto;
border-collapse:
collapse;
}
td{
border:
1px solid darkred;
width:
68px;
height:
68px;
}
.
divw {
width:
100%
;
height:
100%
;
background:
white;
border-radius:
50%
;
box-shadow:
0px 0px 10px gray;
} .
divb {
width:
100%
;
height:
100%
;
background:
black;
border-radius:
50%
;
box-shadow:
0px 0px 20px gray;
}
</style>
<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>
<script>
window.
onload=
function () {
var tabEle=
document.
querySelectorAll(
"tr td")
;
var a=
false;
for(
var index=
0;index<tabEle.
length;index++){
tabEle[index].
onclick=
function () {
if(a==
false){
if(
this.
className==
''){
fall(
'divw')
;
this.
className=
'white';
this.
appendChild(
div)
;
a=
true;
}
}
else{
if(
this.
className==
''){
fall(
'divb')
;
this.
className=
'black';
this.
appendChild(
div)
;
a=
false;
}
}
function fall(classEle) {
div=
document.
createElement(
'div')
;
div.
className=classEle
;
}
}
}
}
</script>
</body>
</html>
效果如图：
几点收获：border-callapse:设置表格边框是否合并为单一的边框；
由于每次放置棋子都是在方格中新添加，可以设置flag判断该方格有没有放置棋子，并决定放置白棋还是黑棋。ClassName都为“”，我们可以根据其className做文章，用到了createElement() appendChild()，
事实上，在if语句中添加ClassName是多余的，没有起到明显作用。在最后fall方法中统一设置ClassName即可，不同在于css渲染是白棋还是黑棋。
几点疑惑：棋盘方格大小设置 与 其他数字计算是否有什么关系。只有69px左右时，棋子是铺满的，其他设置就会出现椭圆，还没有搞明白。
转载请注明原文地址: https://www.6miu.com/read-2625123.html
