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


    将小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>
  • 相关阅读:
    BZOJ5311,CF321E 贞鱼
    POJ3208 Apocalypse Someday
    POJ1037 A decorative fence
    POJ1737 Connected Graph
    CF559C Gerald and Giant Chess
    NOI2009 诗人小G
    Problem 2726. -- [SDOI2012]任务安排
    POJ1821 Fence
    HDU5542 The Battle of Chibi
    POJ2376 Cleaning Shifts
  • 原文地址:https://www.cnblogs.com/jia520110270/p/4766045.html
Copyright © 2020-2023  润新知