将小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> </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)"; Load(); function Load() { var c=""; var a = Math.ceil(Math.random()*15); for(var i=0;i<16;i++) { if(i==a) { c=c+"<div onclick='pic(this,"+i+")' bs='lei'></div>"; } else { c=c+"<div onclick='pic(this,"+i+")'></div>"; } } var s=document.getElementById("a1"); s.innerHTML=c; } function pic (a,i) { a.style.backgroundImage=img[i]; if(a.getAttribute("bs")== "lei") { alert("踩中地雷了!"); window.close(); } } </script>