将小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>
时间： 2024-08-28 12:26:19