前端——》手机H5页面九宫格抽奖（含概率及奖品配置）

页面效果

：页面有6次抽奖机会，每次抽完奖会弹出领奖小弹窗（可选择不要），并在下方的已获列表中展示已获得的奖品列表

---

 

 

第一步，核心js：注释都在代码上

核心代码一：lottery.js

这个lottery.js是核心的js，里面包含了加载页面九宫格相关图片和文字的事件、抽奖事件、抽奖停转事件、奖品领取事件等等。奖品图片、跳转链接、中奖概率皆从后台接口返回的js中取。 暴露了四个方法名用以页面调用。

function lotteryService() {

    var lottery = {
        index: -1,    //当前转动到哪个位置，起点位置
        count: 0,    //总共有多少个位置
        timer: 0,    //setTimeout的ID，用clearTimeout清除
        speed: 20,    //初始转动速度
        times: 0,    //转动次数
        cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1,    //中奖位置
        init: function () {
            if ($("#lottery-unit").find(".grid-draw-item").length > 0) {
                $units = $("#lottery-unit").find(".grid-draw-item");
                this.obj = $("#lottery-unit");
                this.count = $units.length - 1;
                $("#lottery-unit").find(".unit-" + this.index).addClass("grid-draw-item-active");
            }
            ;
        },
        roll: function () {
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".unit-" + index).removeClass("grid-draw-item-active");
            index += 1;
            if (index > count - 1) {
                index = 0;
            };
            $(lottery).find(".unit-" + index).addClass("grid-draw-item-active");
            this.index = index;
            return false;
        },
        stop: function (index) {
            this.prize = index;
            return false;
        }
    };

    /*手机号*/
    var mobile = '';

    /*抽奖按钮是否可以点击,false 为可以点击*/
    var click = false;

    /*抽奖总次数*/
    var count=6;

    /*已抽次数*/
    var doneCount=0;

    /*所有奖品列表*/
    var pricesJosn=[];

    /*点击抽奖后滚动的效果*/
    function roll() {
        lottery.times += 1;
        lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
        /*当跑马灯停的时候*/
        if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
            clearTimeout(lottery.timer);
            lottery.prize = -1;
            lottery.times = 0;
            click = false;
            var cacheCountLength=0;
            /*每次抽奖停下来的时候先从cookie中获取之前的抽奖次数*/
            var cacheCount=utilService().getCookie(mobile + "cacheCount");
            if(cacheCount!=null&&cacheCount!=undefined){
                if(cacheCount==''){
                    cacheCountLength=0;
                }else{
                    cacheCountLength=cacheCount.split(",").length;
                }
                /*若之前有抽过奖，那么已抽次数在之前的基础上+1*/
                doneCount=cacheCountLength+1;
            }else{
                doneCount=6;
            }
            /*总次数-已抽次数=剩余次数 大于零，防止出现抽奖次数为负数的情况*/
            if(count-doneCount>=0){
                $("#surplusNum").html(count-doneCount);
                showPriceDetails(lottery.index);
                $('.grid-draw-modal').show()
            }
        } else {
            if (lottery.times < lottery.cycle) {
                lottery.speed -= 10;
            } else if (lottery.times == lottery.cycle) {
                /*根据各奖品概率获取中奖位置*/
                 apiService().findIndexByRate().then(function (res){
                     lottery.prize = res;
                });
            } else {
                if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                    lottery.speed += 110;
                } else {
                    lottery.speed += 20;
                }
            }
            if (lottery.speed < 40) {
                lottery.speed = 40;
            };
            lottery.timer = setTimeout(roll, lottery.speed);//循环调用
        }
        return false;
    }

    /*领取奖品*/
    function openNewPage(url) {
        window.location.href = url;
        sessionStorage.setItem(JSON.parse(sessionStorage.formMap).mobile + "-openNewPage", "true");
    }

    /*加载九宫格小图片*/
    function loadLottryImgMini() {
        apiService().getLotteryJson().then(function (res){
            pricesJosn=res;
        });
        for(var i=0;i<8;i++){
            var priceimgDiv='<img src="'+pricesJosn[i].imgsrcMini+'" alt="">';
            $("#price-imgMini-"+i).html("");
            $("#price-imgMini-"+i).append(priceimgDiv);
        }
    }

    /*加载九宫格抽奖停转时弹窗中的图片文字及链接内容*/
    function loadLottryImgBig(index) {
        if (index == 0) {
            $("#price-name").html(pricesJosn[0].title);
            $("#price-img").append('<img src="'+pricesJosn[0].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[0].link+"')")
        } else if (index == 1) {
            $("#price-name").html(pricesJosn[1].title);
            $("#price-img").append('<img src="'+pricesJosn[1].imgsrcBig+'" alt="">');
            $("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[1].link+"')")
        } else if (index == 2) {
            $("#price-name").html(pricesJosn[2].title);
            $(