JS-简易版打地鼠

效果预览

 

html样式

  <h1>分数:0分</h1>
    <table>
        <caption>打地鼠</caption>
        <tr>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
        </tr>
        <tr>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
        </tr>
        <tr>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
        </tr>
    </table>

css样式

<style>
    body table {
        margin: 0 auto;
    }

    table {
        background-image: url('./images/beijing.jpg');
    }

    table caption {
        font-family: 'Courier New', Courier, monospace;
        font-size: 30px;

    }

    table td {
        width: 100px;
        height: 100px;
    }

    img {
        margin-top: 30px;
    }
</style>

js代码

<script>
        /* 获取所有img */
        var imgs = document.getElementsByTagName('img');
        // console.log(imgs);

        var num = 0; // 随机=》出现地鼠的坑
        setTimeout('chuxin()', 1000)
        /* 地鼠出现 */
        function chuxin() {
            // 随机数
            num = Math.floor(Math.random() * 9)
            // 改变随机img的照片样式
            imgs[num].src = "./images/dishu.gif";
            // 给个定时器 间隔时间调用
            setTimeout('xiaoshi()', 1000)
            // 给随机的照片添加点击样式
            imgs[num].setAttribute('onclick', 'da()')
            // 样式照片bug (修改)
            imgs[num].style.marginTop = '0px'
        }
        // chuxin()
        /* 地鼠消失 */
        function xiaoshi() {
            // 改变随机img的照片样式
            imgs[num].src = "./images/keng.gif";
            // 给个定时器 间隔时间调用
            setTimeout('chuxin()', 1000)
            // 样式照片bug (修改)   
            imgs[num].style.marginTop = '30px'
        }

        /* 打地鼠 */
        var content = 0; // 计分器
        function da() {
            // 改变随机img的照片样式
            imgs[num].src = "./images/shang.gif";
            // 清除给随机img添加的样式
            // 目的: 只让点一次
            imgs[num].removeAttribute('onclick', 'da()')
            // 改变分数的样式
            content += 10;
            document.querySelector('h1').innerHTML = `分数:${content}分`;
        }
    </script>