js九宫格抽奖

H5营销活动常用抽奖功能，通常为转盘或九宫格的方式。可以通过配置来设置奖品及奖品中奖概率。

流程为前端展示动效交互，在点击开始抽奖后，转盘开始转起来，同时请求后端接口获取奖品结果，再根据结果调整转盘转动到具体位置。

示例为简单H5九宫格抽奖。

    <div class="container">
        <p>九宫格抽奖</p>
        <ul class="lottery">
            <li class="item-0">1积分</li>
            <li class="item-1">10积分</li>
            <li class="item-2">谢谢惠顾</li>
            <li class="item-7">2积分</li>
            <li class="start" data-able="1">开始</li>
            <li class="item-3">50积分</li>
            <li class="item-6">2积分</li>
            <li class="item-5">谢谢惠顾</li>
            <li class="item-4">5积分</li>
        </ul>
    </div>

<script>
    // 获取元素
    function $(selector){
        return document.querySelector(selector);
    }

    let step = 0, //计数器
    timeInterval = 2, //速度控制器
    final, //最终位置
    looperFun, // setTimeout的返回值
    prizeList = ['1积分', '10积分', '再接再厉', '2积分', '50积分', '2积分', '再接再厉', '5积分'];

    function randomNum(arr = []){

        // ES6 Map对象： 键与值的集合 方便访问其键与值
        let m = new Map(arr);
        // 计算概率
        let probability = 0;
        for (const i of m.values()) {
            probability += i;
        }        

        if(probability > 1){
            // 给一个友好的提示
            alert("概率总和不能大于1");
            return false;
        }

        // 剩下没有定义的各自能占多少概率。
        // size 返回映射中的元素数
        let remainProbability = (1 - probability) / (8 - m.size);
        // 生成随机值，跟i对应的概率比较，
        let res = 0, r = Math.random();
        for (let i = 0; i < 8; i++) {
            // 有就取值 没有就随机取
            m.has(i) ? res += m.get(i) : res += remainProbability;
            if (res > r) {
                return i;
            }
        }
    }

    // 开始抽奖
    function start(e){
        if(e.target.dataset.able === "1"){
            // 随机0-7 
            // 设置抽奖概率 不传参的话这几个商品几率相等
            // let arr = [[0,0],[1,0.5],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0]];
            // 这里不传参 概率均等
            final = randomNum([[1,0.9], [7, 0.1]]);    
            if(final === false){
                console.log("出错了");
                return false;
            }
            e.target.setAttribute('data-able', 0);
            looperFun = setTimeout(looper, 100);
        }else{
            console.log("点了个寂寞");
            return false;
        }
    }

    // 旋转九宫格
    function looper(){
        // 移除上一个被选中的样式
        $(".active") &&　$(".active").classList.remove("active");
    
        // 转了超过3圈后才能停止。
        if (step >= 24 + final) {
            $('.item-' + final).classList.add('active');
            step = final;
            setTimeout(() => {
                $('.start').setAttribute('data-able', 1);
                if(final == 2 || final == 5){
                    alert(prizeList[final]+', 下次可能就中了');
                }else{
                    alert('恭喜你，抽中了' + prizeList[final]);
                }
            }, 100);
            clearTimeout(looperFun);
            return;
        }
        //当前转圈到的位置。
        let index = step % 8;
        $('.item-' + index).classList.add('active');
        step++;
        // 下次变色的时间。
        let duration;
        if (step >= (16 + final)) { //在剩余一圈时候开始减速
            timeInterval += 1;
        } else {
            if (timeInterval <= 2) {
                timeInterval = 2; //时间缩短不能太小。
            }
            // 越来越快
            timeInterval--;
        }
        duration = timeInterval * 50;
        looperFun = setTimeout(looper, duration);
    }

    $('.start').addEventListener('click', start)

</script>