HTML-扫雷2--小格背景色变背景图片

将小DIV设背景颜色并设置触发的事件(当点击小DIV时它的背景颜色变为背景图片)

地雷的位置是固定的,可自己设置

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*
{
    margin:0px auto;
    padding:0px;
}
#a1 div
{
    width:100px;
    height:100px;
    background-color:#09F;
    border:1px solid black;
    float:left;
    background-size:100px 100px;
}
#a1
{
    width:410px;
    height:410px;

}
</style>
</head>

<body>
<div id="a1">
    <div id="aa1" onclick="pic(this,0)"></div>
    <div id="aa2" onclick="pic(this,1)"></div>
    <div id="aa3" onclick="pic(this,2)"></div>
    <div id="aa4" onclick="pic(this,3)"></div>
    <div id="bb1" onclick="pic(this,4)"></div>
    <div id="bb2" onclick="pic(this,5)"></div>
    <div id="bb3" onclick="pic(this,6)"></div>
    <div id="bb4" onclick="pic(this,7)"></div>
    <div id="cc1" onclick="pic(this,8)"></div>
    <div id="cc2" onclick="pic(this,9)"></div>
    <div id="cc3" onclick="pic(this,10)"></div>
    <div id="cc4" onclick="pic(this,11)"></div>
    <div id="dd1" onclick="pic(this,12)"></div>
    <div id="dd2" onclick="pic(this,13)"></div>
    <div id="dd3" onclick="pic(this,14)"></div>
    <div id="dd4" onclick="pic(this,15)"></div>
</div>
</body>
<script type="text/javascript">
var img=new Array();
img[0]="url(images/1437459768106_03.jpg)";
img[1]="url(images/1437459768106_04.jpg)";
img[2]="url(images/1437459768106_05.jpg)";
img[3]="url(images/1437459768106_06.jpg)";
img[4]="url(images/1437459768106_11.jpg)";
img[5]="url(images/1437459768106_12.jpg)";
img[6]="url(images/1437459768106_13.jpg)";
img[7]="url(images/1437459768106_14.jpg)";
img[8]="url(images/1437459768106_19.jpg)";
img[9]="url(images/1437459768106_20.jpg)";
img[10]="url(images/1437459768106_21.jpg)";
img[11]="url(images/1437459768106_22.jpg)";
img[12]="url(images/1437459768106_27.jpg)";
img[13]="url(images/1437459768106_28.jpg)";
img[14]="url(images/1437459768106_29.jpg)";
img[15]="url(images/1437459768106_30.jpg)";


function pic(a,b)
{
    
    
    a.style.backgroundImage=img[b];
    if(b==8)
    {
        alert("中地雷了!");
        window.close();
    }

}

</script>
原文地址:https://www.cnblogs.com/jia520110270/p/4766045.html