HTML開心消消樂代碼帶注釋
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>開心消消樂</title><style>/*以下為樣式表內容*/
#board{
width: 220px;
height: 220px;
border: 1px solid #ccc;
}
.cell{
width: 50px;
height: 50px;
margin: 5px;
float: left;
border: 1px solid #fff;
}
.cell.selected{
border: 1px solid #f00;
}
/*以上為樣式表內容*/
</style></head>
<body><h1>開心消消樂</h1><div id="board"><div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div><script>var board=document.getElementById('board'); //獲取游戲盤對象
var cells=board.getElementsByTagName('div'); //獲取格子元素數組
for(var i=0; i<cells.length; i++){
cells[i].onclick=function(){ //為每個格子綁定點擊事件
if(this.className.indexOf('selected')!=-1){ //判斷當前是否為選中狀態
this.className='cell'; //取消選中
}else{
this.className='cell selected'; //選中
}
};
}
</script></body></html>