将小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>
原文：http://www.cnblogs.com/jia520110270/p/4766045.html