master

分支 (2)

管理

管理

master

main

beat-mice
/
mice.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: black;
        }

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .groud {
            display: flex;
            position: relative;
            width: 1000px;
            height: 500px;
            border-radius: 20px;
            background-color: #018001;
            margin: 20px auto;
            flex-direction: row;

            justify-content: center;
            /* 会让盒子均匀分布,不贴边 */
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .groud .home {
            position: relative;
            float: left;
            width: 150px;
            height: 50px;
            border-radius: 25px;
            background-color: #febc5b;
            margin: 30px;
            top: 40px;

        }

        .small {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 50px;
            background-color: #b04040;
            /* 控制圆角形状，使其成为椭圆 */
            border-radius: 50%/100% 50% 0% 0%;
            /* 隐藏超出椭圆范围的部分 */
            overflow: hidden;
        }

        .big {

            position: absolute;
            bottom: 50%;
            left: 50%;
            /* 使元素向左移自身的50% */
            transform: translateX(-50%);
            width: 80px;
            height: 65px;
            background-color: #b04040;

            /* 控制圆角形状，使其成为椭圆 */
            border-radius: 50% 50% 0% 0%;
            text-align: center;
            padding-top: 25px;
        }

        .btn {
            /* display: flex; */
            border-radius: 10px;
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 80px;
            background-color: skyblue;
        }

        .btn .start,
        .stop {
            width: 50%;
            /* 实现按钮盒子居中对齐 */
            /* 调节宽度 */
            margin: auto;
            /* 文字的高度：设置到和外面的盒子一样 */
            line-height: 80px;
            /* 按钮字体大小 */
            font-size: 2rem;
            text-align: center;

            background-color: transparent;
            /* 按钮文本颜色 */
            color: white;
            /* 去除按钮边框 */
            border: none;
            /* 鼠标样式为手型 */
            cursor: pointer;
            /* 去除按钮点击时的外边框 */
            outline: none;
        }

        .start {
            display: block;
        }

        .stop {
            display: none;
        }

        .timer {
            position: absolute;
            top: 30px;
            right: 50px;
            font-size: 60px;
            color: #ffff17;
            text-shadow: 0 0 50px yellow;
        }
    </style>
</head>

<body>
    <div class="groud">
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
        <div class="home">
            <div class="small"></div>
            <div class="big">鼠</div>
        </div>
    </div>

    <div class="btn">
        <button class="start">开始</button>
        <button class="stop">停止</button>
    </div>

    <p class="timer">

    </p>

    <script>
        /*
        1. 开始事件==》开始按钮消失，禁止按钮显示
2. 生成随机数？？如何随机抽盒子来显示
3. 间隔一定毫秒数，随机隐藏一个小老鼠，并显示该位置的一个大老鼠
4. 只有捕捉到点击事件才会：隐藏大老鼠，显示小老鼠
        */
        let start = document.querySelector(".start")
        let stop = document.querySelector(".stop")

        let home = document.querySelectorAll(".home")
        let timer = document.querySelector(".timer")
        let btn = document.querySelector(".btn")
        mice = Array.from(home)
        // 隐藏所有的大老鼠，显示所有的小老鼠
        let init = function () {
            for (let i = 0; i < mice.length; i++) {
                mice[i].children[1].style.display = 'none'
                mice[i].children[0].style.display = 'block'
            }
        }

        // 一开始全部的大老鼠都隐藏
        document.addEventListener("DOMContentLoaded", init())
        let random = 0;
        let timerId;
        let second = 0;
        start.addEventListener("click", () => {
            init()
            // 清空原来的计时文本
            clearInterval(timerId)
            second = 0
            timer.innerHTML = second

            // 隐藏开始按钮，显示停止按钮
            start.style.display = 'none'
            stop.style.display = 'block'
            btn.style.backgroundColor = '#ef8182'


            timerId = setInterval(function () {

                second++
                timer.innerHTML = second
                random = parseInt(Math.floor(Math.random() * mice.length));
                let randomBox = mice[random]

                console.log(randomBox)
                let small = randomBox.children[0]
                let big = randomBox.children[1]
                // 隐藏小老鼠，显示大老鼠
                small.style.display = 'none'
                big.style.display = 'block'
                // 随机隐藏一个小老鼠，并显示该位置的一个大老鼠
                // 捕捉鼠标点击事件，
                big.addEventListener("click", () => {
                    big.style.display = 'none'
                    small.style.display = 'block'
                })
            }, 1000)
        })

        stop.addEventListener("click", () => {
            clearInterval(timerId)

            // 显示开始按钮，隐藏停止按钮
            stop.style.display = 'none'
            start.style.display = 'block'
            btn.style.backgroundColor = '#86d1ec'
        })

    </script>
</body>

</html>