标签：jQuery 抽奖 sum 旋转 html background var div

轮盘抽奖最终样式

废话不多说先写静态样式:
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>

标签：jQuery,抽奖,sum,旋转,html,background,var,div
来源： https://blog.csdn.net/MB_xiemo/article/details/100567278

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。