九宫格抽奖

最新推荐文章于 2024-08-04 20:38:28 发布

杯倾川·苶陽

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量343

点赞数 4

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_72636650/article/details/138748673

版权

首先这个抽奖是顺时针，所以调每个奖品位置的时候要一个个的细调，也可以用弹性盒子，然后进行换位，剩下js的部分里面全部都有解析，不过后面差个初始化

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 340px;
            height: 340px;
            border: 1px pink solid;
            position: relative;
            margin: 100px;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            text-align: center;
            line-height: 100px;
        }

        .rouge {
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .bag {
            position: absolute;
            top: 10px;
            left: 120px;
        }

        .skirt {
            position: absolute;
            top: 10px;
            left: 230px;
        }

        .beauty {
            position: absolute;
            top: 120px;
            left: 230px;
        }

        .strawberry {
            position: absolute;
            top: 230px;
            left: 230px;
        }

        .milktea {
            position: absolute;
            top: 230px;
            left: 120px;
        }

        .apple {
            position: absolute;
            top: 230px;
            left: 10px;
        }

        .enlist {
            position: absolute;
            top: 120px;
            left: 10px;
        }

        .button {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            position: absolute;
            top: 120px;
            left: 120px;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="rouge">口红</div>
        <div class="bag">包包</div>
        <div class="skirt">裙子</div>
        <div class="beauty">美甲</div>
        <div class="strawberry">草莓</div>
        <div class="milktea">奶茶</div>
        <div class="apple">苹果手机</div>
        <div class="enlist">谢谢参与</div>
        <strong class="button">点击抽奖</strong>
    </div>
    <script>
        //    声明let变量prize获取到上面所有奖品的div元素
        let prize = document.querySelectorAll('.box div');
        //    声明let变量k获取下标
        let k = 0;
        //    声明let变量button获取抽奖按钮元素
        let button = document.getElementsByClassName("button")[0];
        //    声明let变量time获取定时器的初始值为1000ms
        let time = 1000;
        //    声明let变量timer获取定时器
        let timer = null;
        //    声明let变量count获取圈数
        let count = 0;
        //    声明let变量rom用于后面的随机数
        let rom;
        //    给button添加点击开始抽奖的事件
        button.onclick = button_start;



        //    定义一个命名为抽奖按钮的函数
        function button_start() {
            //          将下标为0奖品的颜色变为粉色
            prize[k].style.backgroundColor = 'pink';
            //          变量名rom的值设为一个随机整数
            rom = Math.floor(Math.random() * prize.length);
            console.log(rom);
            //          设置一个定时器，时间间隔为time（1000ms）
            timer = setInterval(start_time, time);
            //          关闭点击抽奖按钮的事件
            button.onclick = null;
        }




        //    定义一个命名为时间间隔的函数
        function start_time() {
            //          用if判断条件为k（下标）小于奖品数量（prize.length）
            if (k < prize.length - 1) {
                //              每执行一次，将下标为k+1
                k++;
                //              将k—1下标的颜色变回初始值
                prize[k - 1].style.backgroundColor = 'aqua';
                //              将下标为k奖品的颜色变为粉色
                prize[k].style.backgroundColor = 'pink';
                //          否则
            } else {
                k = 0;
                //              圈数+1
                count++;
                //              将奖品的最后一个的颜色变为初始值
                prize[prize.length - 1].style.backgroundColor = 'aqua';
                //              将奖品的第一个的颜色变为粉色
                prize[k].style.backgroundColor = 'pink';
            }


            //          用if判断条件为圈数小于5时
            if (count < 5) {
                //              再次进行判断时间间隔是否小于等于200ms
                if (time <= 200) {
                    //                    将时间间隔调为200ms
                    time = 100;
                    //              否则
                } else {
                    //                    将时间间隔每次-40ms
                    time -= 40;

                }
                //          否则
            } else {
                //              再次进行判断时间间隔是否大于等于1000ms
                if (time >= 1000) {
                    //                    将时间间隔调为1000ms
                    time = 500;
                    //              否则
                } else {
                    //                    将时间间隔每次+40ms
                    time += 40;
                }
            }
            //               停止定时器，重新设置定时器，时间间隔为time（1000ms）
            clearInterval(timer);
            //           调用scrolls函数，进行滚动动画
            // button_start();
            timer = setInterval(start_time, time);
            //           进行if判断，如果圈数大于8且随机数等于k
            if (count >= 8 && rom == k) {
                //               则停止定时器
                clearInterval(timer);
                // 打印抽到的奖品
                // console.log(prize[k-1].innerHTML);
                // 打开抽奖成功的提示框
                alert("恭喜你抽中了" + prize[k-1].innerHTML + "！");
                // 关闭抽奖按钮的事件
                button.onclick = null;
            }
        }
    </script>
</body>

</html>