码迷,mamicode.com
首页 > 其他好文 > 详细

扫雷3--地雷位置随机

时间:2015-08-28 12:54:00      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

将小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>

 

扫雷3--地雷位置随机

标签:

原文地址:http://www.cnblogs.com/jia520110270/p/4766066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!