html+js实现识色小程序（识色小游戏）

z_yuyu

已于 2022-10-28 17:27:56 修改

阅读量1.7k

点赞数 3

分类专栏： 😍😍😍前端三件套😍😍😍 文章标签： html5 css js

于 2021-09-25 16:59:37 首次发布

本文链接：https://blog.csdn.net/z_yuyu/article/details/120473953

版权

😍😍😍前端三件套😍😍😍 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

被布置过一个作业，让我们写模仿微信小程序–识色写一个网页，于是网上各种找，没有。。所以，供借鉴

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .main {
        width: 400px;
        height: 650px;
        margin: 10px auto;
        border: 1px solid red;
        background: #F06060;
    }

    .start {
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin: 250px auto;
        font-size: 30px;
        font-weight: 600;
        color: #fff;
        border: 5px solid red;
        border-radius: 20px;
        display: none;
        cursor: pointer;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        width: 380px;
        height: 380px;
        margin: 50px 10px;
        list-style: none;

    }

    li {
        border: 1px solid #fff;
    }

    .li1 {
        width: 50%;
        height: 50%;
    }

    .li2 {
        width: 33.33%;
    }

    .li3 {
        width: 25%;
    }

    .li4 {
        width: 20%;
    }

    .li5 {
        width: 16.66%;
    }

    .li6 {
        width: 14.28%;
    }

    .li7 {
        width: 12.5%;
    }

    .li8 {
        width: 11.11%;
    }

    .li9 {
        width: 10%;
    }

    .li10 {
        width: 9.09%;
    }

    .li11 {
        width: 8.33%;
    }

    .li12 {
        width: 7.69%;
    }

    .li13 {
        width: 7.14%;
    }

    .li14 {
        width: 6.66%;
    }

    .li15 {
        width: 6.25%;
    }

    .li16 {
        width: 5.88%;
    }

    .li17 {
        width: 5.55%;
    }

    .li18 {
        width: 5.26%;
    }

    .li19 {
        width: 5%;
    }

    .li20 {
        width: 4.76%;
    }

    .score {
        position: fixed;
        bottom: 200px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
        color: #fff;
    }

    .countDown {
        position: fixed;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
        color: #fff;
    }
</style>

<body>
    <div class="main">
        <!-- 重新开始 -->
        <div class="countDown"></div>
        <p class="start"></p>
        <p class="score"></p>
        <ul>
        </ul>
    </div>
</body>
<script>
    var ul = document.querySelector('ul');
    var start = document.querySelector('.start');
    var score = document.querySelector('.score');
    var i = 2;
    var b = 1;
    var scoreValue = 0;
    addRect();
    function addRect() {
        // 随机颜色
        var color = Math.floor(Math.random() * 16777215).toString(16);
        ul.innerHTML = '';
        for (var a = 0; a < i * i; a++) {
            var li = document.createElement('li');
            ul.appendChild(li);
            li.className = 'li' + b;
            li.style.backgroundColor = '#' + color;
        }
        var index = Math.floor(Math.random() * i * i);
        ul.children[index].style.opacity = 0.8;
        ul.children[index].addEventListener('click', function () {
            scoreValue++;
            score.innerHTML = '得分：' + scoreValue;
            if (b < 20) {
                b++;
                i++;
                addRect();
            } else {
                ul.style.visibility = 'hidden';
                start.innerHTML = '牛！点击重开';
                start.style.display = 'block';
                countDown.style.display = 'none';
            }
        })
    }
    // 点击重开
    start.addEventListener('click', function () {
        ul.innerHTML = '';
        ul.style.visibility = 'visible';
        start.style.display = 'none';
        countDown.style.display = 'block';
        i = 2;
        b = 1;
        scoreValue = 0;
        score.innerHTML = '';
        addRect();
        time = 120;
        getCountDown();
    })
    // 两分钟倒计时
    var time = 120;
    var countDown = document.querySelector('.countDown');
    getCountDown();
    function getCountDown() {
        // 倒计时结束
        if (time == 0) {
            start.innerHTML = '时间到！点击重开';
            ul.style.visibility = 'hidden';
            start.style.display = 'block';
            countDown.style.display = 'none';
        }
        countDown.innerHTML = time;
        time--;
    }
    var clock = setInterval(getCountDown, 1000)
</script>

</html>

效果

请添加图片描述

z_yuyu

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+js实现识色小程序（识色小游戏）

被布置过一个作业，让我们写模仿微信小程序–识色写一个网页，于是网上各种找，没有。。所以，供借鉴代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
复制链接

扫一扫