html开心消消乐代码带注释

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;
     icells.length;
 i++){
cells[i].onclick=function(){
 //为每个格子绑定点击事件if(this.className.indexOf('selected')!=-1){
     //判断当前是否为选中状态this.className='cell';
 //取消选中}
else{
    this.className='cell selected';
 //选中}
}
    ;
}
    /script>
    /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！