移动端 - 九宫格抽奖

九宫格抽奖demo

九宫格抽奖模型&html拼接模型
      图1                                                           ** 图2 **



注 ：当动态实现九宫格奖品信息展示时，若想按照图1位置显示奖品信息，则此时需要换一下九宫格的位置。
替换位置为：4→8、6→4、8→6、9→5、5→○（○即抽奖按钮）。

封装九宫格奖品列表排序方法

/* 九宫格奖品列表排序 */
function sortlist(data, el) {
    var id4,
        str = '';
    for (var i = 0; i < data.length; i++) {
        if (i == 3) {
            //3->7
            str += "<div class='prize jp-" + 7 + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
        } else if (i == 4) {
            // 4
            id4 = 4;
            str += "<div id='btn'><p>开始抽奖</p></div>";
        } else if (i == 5) {
            //5->3
            str += "<div class='prize jp-" + 3 + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
        } else if (i == 7) {
            //7->5、8->4
            str +=
                "<div class='prize jp-" +
                5 +
                "'><img src='" +
                data[i].pic +
                "'><p>" +
                data[i].name +
                "</p></div><div class='prize jp-" +
                id4 +
                "'><img src='" +
                data[id4].pic +
                "'><p>" +
                data[id4].name +
                '</p></div>';
        } else {
            str += "<div class='prize jp-" + i + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
        }
    }
    $('#' + el).html(str);
}

//初始化抽奖按钮点击属性
var click = false;

初始全局变量（获奖奖品下标）

// 奖品列表
var prizelist,
    // 中奖下标（在奖品列表中的下标）
    prizeobj = {
        pindex: ''
    };

奖品动画初始化

var luck = {
    index: -1, //当前转动到哪,起点位置
    count: 0, //共有多少个位置
    timer: 0, //settimeout的id,用cleartimeout清除
    speed: 20, //初始化转动速度
    times: 0, //转动次数
    cycle: 25, //转动基本次数:即转动多少次之后进入抽奖环节
    prize: -1, //中奖位置
    init: function(id) {
        if ($('#' + id).find('.prize').length > 0) {
            $luck = $('#' + id);
            $units = $luck.find('.prize');
            this.obj = $luck;
            this.count = $units.length;
            $luck.find('.jp-' + this.index).addclass('active');
        }
    },
    roll: function() {
        var index = this.index;
        var count = this.count;
        var luck = this.obj;
        $(luck).find('.jp-' + index).removeclass('active');
        index += 1;
        if (index > count - 1) index = 0;
        $(luck).find('.jp-' + index).addclass('active');
        this.index = index;
        return false;
    },
    stop: function(index) {
        this.prize = index;
        return false;
    }
};

时间、转速、中奖下标控制

/* 时间、速度、中奖编号控制 */
function roll() {
    luck.times += 1;
    luck.roll();
    if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
        cleartimeout(luck.timer);
        luck.prize = -1;
        luck.times = 0;
        click = false;
    } else {
        if (luck.times < luck.cycle) {
            luck.speed -= 20;
        } else if (luck.times == luck.cycle) {
            // 奖品位置下标 全局变量prizeobj对象为中奖信息
            if (prizeobj.pindex != '') luck.prize = prizeobj.pindex;
        } else {
            if (
                luck.times > luck.cycle + 10 &&
                ((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)
            ) {
                luck.speed += 110;
            } else {
                luck.speed += 20;
            }
        }
        if (luck.speed < 40) luck.speed = 40;
        luck.timer = settimeout(roll, luck.speed);
    }
    return false;
}

加载抽奖动画

luck.init('prizebox');
/* 点击抽奖 */
$('#btn').click(function() {
    if (click) {
        return false;
    } else {
        $.ajax({
            async: false,
            url: 'url',
            type: 'post',
            data: {},
            datatype: 'json',
            success: function(res) {
                if (res.code) {
                    /* 寻找商品下标 */
                    // 寻找中奖商品下标代码...

                    /* 动画 */
                    // 初始转速
                    luck.speed = 100;
                    // 触发动画
                    roll();
                    // 激活点击事件
                    click = true;
                    // 延时动画
                    settimeout(function() {
                        $('#mask').fadein();
                    }, 3600);
                    return false;
                } else {
                    alert(res.message);
                }
            }
        });
        return false;
    }
});

中奖奖品位置的判断（回显到九宫格上）

function findpirzeindex(data, goodid) {
    for (let j = 0, len = data.length; j < len; j++) {
        if (data[j].goodid == goodid) {
            switch (j) {
                case 0:
                    prizeobj.pindex = 0;
                    break;
                case 3: // 3->7
                    prizeobj.pindex = 7;
                    break;
                case 4: //
                    prizeobj.pindex = 4;
                    break;
                case 5: // 5->3
                    prizeobj.pindex = 3;
                    break;
                case 7: // 7->5
                    prizeobj.pindex = 5;
                    break;
                default:
                    prizeobj.pindex = j;
            }
        }
    }
}

注：通过该方法来查找中奖奖品的位置；查找的元素的下标为该元素在其数组对象中的位置下标，此时对比图1和图2两个图表的位置信息，就可以确定中奖奖品所在图1表盘的具体位置。