JS抽奖

如何用JS实现抽奖

抽奖思路
1、数据一、让用户看到的奖品
2、数据二、真实中奖奖品（可以控制每个奖品中将的概率；概率高的奖品数据就多）
3、点击开始抽奖时，奖品有序的增加背景色
4、再次点击同一个按钮，慢慢的中了哪个奖品就在哪里停止

html代码

<div class="wrap">

        <div class="box_1 box">
            <!-- 设置第一个初始为红色 -->
            <div class="content common parent" style="background-color:red;">再来一次</div>
            <div class="content common parent">一脚</div>
            <div class="content common parent">埃及金字塔一座</div>
        </div>

        <div class="box_2 box">
            <div class="content_2 common parent">谢谢惠顾</div>
            <!-- 设置抽奖按钮为蓝色 -->
            <div class="content_2 common " id="btn" style="background-color:blue">开始</div>
            <div class="content_2 common parent" style="position:relative;left: 413px;top: 210px;">空调</div>
        </div>

        <div class="box_3 box">
            <div class="content_3 common parent" style="position:relative;left:-207px">抱枕</div>
            <div class="content_3 common parent" style="position:relative;left:-207px">手链</div>
            <div class="content_3 common parent" style="position:relative;top:-210px">电视机</div>
        </div>
        
    </div>

css代码

* {
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }

        .wrap {
            width: 620px;
            height: 620px;
            margin: 0 auto;
        }

        .common {
            width: 200px;
            height: 200px;
            background-color: black;
            margin-top: 10px;
            margin-left: 10px;
            color: white;
            text-align: center;
            line-height: 200px;
        }

        .box {
            display: flex;
        }

        .box_3 {
            flex-direction: row-reverse;
        }

        .box_2 {
            flex-direction: row-reverse;
        }

JS代码

var div = document.getElementsByClassName('parent'),
            btn = document.getElementById('btn');
        var arr = [];
        for (var i = 0, len = div.length; i < len; i++) {
            arr[i] = div[i].innerHTML;
        }
        var flag = false;
        var timmer;
        var index = 0;
		// 此处可设置想要抽中的奖品   可传多个数组也可传一个
        var arr2 = ['谢谢惠顾', '空调', '电视机', '抱枕', '手链']

        btn.onclick = function () {
            flag = !flag;
            if (flag === true) {
                timmer = setInterval(function () {
                    div[index].style.backgroundColor = 'black';
                    index++;
                    if (index > div.length - 1) {
                        index = 0;
                    }
                    div[index].style.backgroundColor = 'red';
                }, 50);
                btn.innerHTML = '结束';
            } else {
                clearInterval(timmer);
                var t = 50;
                var random = Math.floor(Math.random() * arr2.length);
                sT();
                function sT() {
                    div[index].style.backgroundColor = 'black';
                    index++;
                    if (index > div.length - 1) {
                        index = 0;
                    }
                    div[index].style.backgroundColor = 'red';
                    t += 20;
                    if (t >= 400 && arr[index] == arr2[random]) {
                        clearTimeout(timmer2);
                    } else {
                        var timmer2 = setTimeout(sT, t);
                    }
                }
                btn.innerHTML = '开始';
            }
        }