jQuery旋转抽奖

轮盘抽奖最终样式

废话不多说先写静态样式:
html

	<section></section>
    <button id="Cz">充值两千万</button>

别问为什么，html样式就是这么少其他的都用jquery写

接下来写css

<style>
        section {
            width: 600px;
            height: 600px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
            background: rgb(165, 245, 7);
            border: 10px solid #757575;
        }

        section div {
            width: 170px;
            line-height: 170px;
            text-align: center;
            background-color: rgb(238, 119, 139);
            color: #f0f0f0;
            font-weight: 800;
            font-size: 18px;
            border: 10px solid rgba(131, 231, 17, 0.548);
        }

        .red {
            background-color: red;
        }

        #Cz {
            background: red;
            width: 640px;
            border: 10px solid #757575;
            font-size: 18px;
            color: #fff;
            font-weight: 800;
        }
    </style>

接下来重点来了

<script src="jquery-3.4.1.js"></script>
    <script>
        // 将抽奖的奖品放在数组里
        var items = ['兰博基尼', '法拉利', '星空魅影', '面包车', '开始抽奖', '高级自行车', '王者路由器', '滑板车', '小推车'];
        function layout() {
            // 记录拼接的 html
            var html = '';
            for (var i = 0; i < items.length; i++) {
                var div = `<div>${items[i]}</div>`;
                html += div;
            }
            $("section").html(html);
        }
        layout()

        // 定抽奖次数为全局 记录抽奖次数
        var clickCount = 0;

        $("#Cz").click(function () {
            clickCount -= 4;
            alert('恭喜您充值两千万成功')
        })
        var flge = true
        $("div:eq(4)").click(function () {
            if (flge === true) {
                clickCount++
                // 判断语句限制抽奖次数
                if (clickCount > 3) {
                    alert('您的抽奖次数已用完，请再去充值两千万')
                    return;
                }
                //抽奖
                lottery()
                flge = false;
            }
        })

        var sum = 0;
        // 抽奖逻辑
        function lottery() {
            var arr = [0, 1, 2, 5, 8, 7, 6, 3];
            var arrIndex = Math.floor(Math.random() * arr.length);
            var index = arr[arrIndex];
            var timer = setInterval(() => {
                var arr2 = sum
                var arr1 = arr[arr2]
                if (arr2 >= 8) {
                    arr1 = arr[arr2 - 8]
                }
                console.log(sum + "------" + arr1 + "=====" + (index + 8))
                $('section div').css('background', 'rgb(238, 119, 139)')
                $(`div:eq(${arr1})`).css('background', 'red')
                if (sum === arrIndex+8) {
                    clearInterval(timer);
                    setTimeout(() => {
                        alert(items[index]);
                        sum = sum-8;
                        flge = true;
                        return;
                    }, 500)
                }
                sum++
            }, 100);
        }
    </script>