寻找房祖名小游戏开源js，css弹性盒布局

最新推荐文章于 2024-07-23 09:21:29 发布

前端开发者--小明

最新推荐文章于 2024-07-23 09:21:29 发布

阅读量194

点赞数

分类专栏： js 文章标签：程序开源 js css DOM

本文链接：https://blog.csdn.net/qq_41373731/article/details/100108315

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        #box {
            width: 500px;
            height: 600px;
            border: 2px solid #555;
            margin: 10px auto;
        }

        ul {
            width: 500px;
            height: 500px;
        }

        p {
            border-bottom: 2px solid #555;
            font: 50px/98px 'hei';
            padding: 0px 20px;
        }

        strong {
            float: right;

        }

        .zhu {
            display: flex;
        }

        ul {
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 0;
        }

        li {
            width: 100%;
            height: 100%;
            background-image: url("img/1.png");
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div id="box">
        <p class="clear"><span>时间：160</span><strong>分数：0</strong></p>
        <div class="zhu">
            <ul>
                <li></li>
            </ul>
        </div>

    </div>
</body>
<script>
    var ozhu = document.getElementsByClassName('zhu')[0];
    var osp = document.getElementsByTagName('span')[0];
    var ost = document.getElementsByTagName('strong')[0];
    var a = 0;
    var num = 1;
    var b = 160;
    var c = 0;
    var oli = document.getElementsByTagName('li');
    oli[0].style.backgroundImage = 'url("img/2.png")';
    var time = setInterval(function(){
        b--;
        osp.innerText = '时间：'+b;
        if(b<0){
            clearInterval(time);
            location.reload();
        }
    },1000)
    fn1();
    function fn1() {
        var oli = document.getElementsByTagName('li');
        for (var i = 0; i < oli.length; i++) {
            oli[i].index = i;
            oli[i].onclick = function () {
                if (this.index == a) {
                    c+=10;
                    ost.innerText = '分数：'+c ;
                    ozhu.innerHTML = '';
                    num++;
                    for (var j = 0; j < num; j++) {
                        var oul = document.createElement("ul");
                        for (var k = 0; k < num; k++) {
                            var ooli = document.createElement("li");
                            oul.appendChild(ooli);
                        }
                        ozhu.appendChild(oul);
                    }
                    a = Math.floor(Math.random() * oli.length);
                    oli[a].style.backgroundImage = 'url("img/2.png")';
                    fn1();
                }
            }
        }
    }
</script>

</html>