您的位置：首页 > Web前端 > HTML

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

2015-08-28 11:38 453 查看
将小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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航