九宮格抽獎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表盤的具體位置。