JS九宫格抽奖

制作九宫格抽奖是一个很有意思的过程，废话不多说，直接上代码，看看你能抽到什么。

html部分

<body>
        <div id="all">
            <div class="one">M4A1-雷神</div>
            <div class="two" style="font-size: 12px;">SCAR Light-白虎</div>
            <div class="three">M200-幻神</div>
            <div class="four" style="font-size: 14px;">大礼包（一折）</div>
            <div class="five">98K-星神</div>
            <div class="six">谢谢惠顾</div>
            <div class="seven">王者-葵</div>
            <div class="eight">再来一次</div>
            <button id="button">开始抽奖</button>
        </div>
</body>

css部分

<style>
            #all {
                width: 360px;
                height: 360px;
                margin: auto;
                position: relative;
                text-align: center;
                line-height: 100px;
            }

            .one {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 10px;
                top: 10px;
            }

            .two {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 120px;
                top: 10px;
            }

            .three {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 230px;
                top: 10px;
            }

            .four {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 230px;
                top: 120px;
            }

            .five {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 230px;
                top: 230px;
            }

            .six {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 120px;
                top: 230px;
            }

            .seven {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 10px;
                top: 230px;
            }

            .eight {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 10px;
                top: 120px;
            }

            #button {
                display: block;
                background-color: cadetblue;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 120px;
                top: 120px;
                cursor: pointer;
            }
        </style>

js部分

<script>
        let button = document.getElementById('button');//获取按钮
        let all = document.getElementById('all'); //获取所有盒子
        let prize = all.getElementsByTagName('div');//获取奖品
        console.log(prize);
        let i = 0;//声明一个变量 对应奖品
        let speed = 0;//声明一个变量对应圈数
        let time = 300;//声明时间变量
        let inter;// 声明一个变量，把定时器赋给这个变量
        let num;//声明一个变量，获得一个随机数组
        button.onclick = asb; //给转动函数赋一个名字，为了不能重复点击
        //点击
        function asb() {
            prize[i].style.background = 'blue';
            inter = setInterval(rotates, time);
            num = Math.floor(Math.random() * prize.length);
            console.log(num);
            button.onclick = null;
        }
        //转动颜色变化
        function rotates() {
            if (i < prize.length - 1) {
                i++;
                prize[i].style.backgroundColor = 'blue';
                prize[i - 1].style.backgroundColor = 'aquamarine';
            } else {
                i = 0;
                prize[i].style.backgroundColor = 'blue';
                prize[prize.length - 1].style.backgroundColor = 'aquamarine';
                speed++;
            }
            //速度变化设置
            if (speed < 2) {
                time -= 20;
                if (time < 100) {
                    time = 100;
                }
            } else if (speed > 4) {
                time += 50;
                if (time > 500) {
                    time = 500;
                }
            }
            //判定停止
            if (i == num && speed > 7) {
                clearInterval(inter);
                //设置一次性定时器，用来设置弹窗和恢复数据
                setTimeout(function() {
                    alert("恭喜您获得" + prize[i].innerHTML);
                    //重置数据
                    prize[i].style.backgroundColor = 'aquamarine';
                    i = 0;
                    time = 100;
                    speed = 0;
                    num = 0;
                    button.onclick = asb;
                }, 400)
            } else {
                //重置定时器
                clearInterval(inter);
                inter = setInterval(rotates, time);
            }
        }
    </script>

ヾ(￣▽￣)Bye\~Bye\~

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/137832535