九宮格抽獎邏輯梳理

一、頁面布局

​ 默認九宮格圖                                                                     九宮格占位圖

                                

HTML頁面代碼：

<!-- center為九宮格區域 -->
<div class="center">
    <!-- box為九個格子，DOM拼接區域 -->
    <ul id="box">
        <!-- li中下標從0開始，0-8共九個格子 -->
        <li class="prize jp-0 active">
            <!-- 動態獲取獎品圖標和文字描述 -->
            <img src="" draggable="false">
            <p>xxxx</p>
        </li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <!-- 其中下標為4的格子是最中心的按鈕 -->
        <li class="no-price" id="drawBtn">
            <div>開始抽獎</div>
        </li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>

二、頁面樣式

九宮格布局相關CSS頁面樣式：

.center ul {
    box-sizing: border-box;
    padding: 15px;
    width: 100%;
    height: 100%;
}

ul li {
    float: left;
    box-sizing: border-box;
    width: 195px;
    height: 195px;
    background: #fff;
    border-radius: 6px;
    text-align: center;
}

ul li:nth-child(2),
ul li:nth-child(8) {
    margin: 0 15px;
}

ul li:nth-child(4),
ul li:nth-child(6) {
    margin: 15px 0;
}

ul li:nth-child(5) {
    cursor: pointer;
    margin: 15px;
    background: #f86f05;
}

ul li:nth-child(5):hover {
    opacity: 0.8;
}

ul li > img {
    margin-top: 20px;
    width: 104px;
    height: 104px;
}

ul li > p {
    line-height: 40px;
    font-size: 28px;
    color: #ff9f00;
}

ul li.no-price {
    padding: 15px 0;
}

ul li.no-price div {
    padding: 10px 16px;
    line-height: 60px;
    font-size: 54px;
    color: #fff;
    letter-spacing: 2px;
}

ul li.no-price p.tips {
    line-height: 30px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

#box li.active {
    background: #fcff76;
}

三、代碼邏輯

Luck幸運抽獎函數方法：

// 抽獎動畫效果
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;
    }
};

獎品列表DOM拼接：

/* 獎品列表排序 */
let sortList = function(data, el) {
    var str = "",
        sortArr = [];
    for (let i = 0, len = data.length; i < len; i++) {
        let tmp = data[i];
        if (i == 3) {
            sortArr[
                i
            ] = `<li class="prize jp-7" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
        } else if (i == 4) {
            sortArr[
                i
            ] = `<li class="no-price" id="drawBtn"><div>開始抽獎</div><p class="tips">注：獎品以最終實物為准</p></li>`;
            sortArr[5] = `<li class="prize jp-3" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
        } else if (i == 5) {
            sortArr[6] = `<li class="prize jp-6" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
        } else if (i == 6) {
            sortArr[7] = `<li class="prize jp-5" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
        } else if (i == 7) {
            sortArr[8] = `<li class="prize jp-4" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
        } else {
            sortArr[
                i
            ] = `<li class="prize jp-${i}" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
        }
    }
    $("#" + el).html(sortArr.join(""));
    // 在拼接完頁面之后再初始化抽獎邏輯函數，否則獲取不到li的DOM節點列表
    luck.init("box");
};

時間、速度、中獎編號&中獎獎品下標控制：

/* 時間、速度、中獎編號控制 */
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) {
            // 獎品位置下標
            if (prizeInfo.index != "") {
                luck.prize = prizeInfo.index;
            }
        } 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;
}
// 初始化點擊事件為false，防止多次點擊造成動畫累積
var click = false;

點擊抽獎實現：

/* 點擊抽獎 */
$("#box").on("click", "li#drawBtn", function() {
    if (click) {
        return false;
    } else {
        $.post(`api`, { genre: 3, type: 2 }, function(res) {
            if (res.code == 1) {
                let data = res.result_data;
                let gId = data.goodGid,
                    pIndex = "";
                $("#prizeImg").attr("src", data.pic);
                $("#prizeTips").html(data.name);
                let arr = prizeList;
                for (let i = 0, len = arr.length; i < len; i++) {
                    let goodGid = arr[i]["goodGid"];
                    if (gId == goodGid) {
                        switch (i) {
                            case 3:
                                prizeInfo.index = 7;
                                break;
                            case 4:
                                prizeInfo.index = 3;
                                break;
                            case 5:
                                prizeInfo.index = 6;
                                break;
                            case 6:
                                prizeInfo.index = 5;
                                break;
                            case 7:
                                prizeInfo.index = 4;
                                break;
                            default:
                                prizeInfo.index = i;
                                break;
                        }
                        break;
                    }
                }
                // 抽獎
                luck.speed = 100;
                roll();
                click = true;
                let timer = setTimeout(function() {
                    clearTimeout(timer);
                    $("#mask").fadeIn();
                }, 4000);
                return false;
            } else {
                alert(res.message);
            }
        });
    }
});