怎麼實現一個九宮格抽獎？

效果預覽

實現思路

將高亮的方塊盒子的執行順序定義好，利用定時器將速度調節爲由快到慢，等速度降到某個區間就判斷高亮的下標是否匹配最終的獎品下標，匹配則開獎，不匹配則繼續降速。

正文

每到特殊的節日或者搞活動的時候就須要開發配合運營，搞一些抽獎的活動，比較經常使用的抽獎方式有：大轉盤，九宮格，老虎機等。此次咱們來實現一個九宮格抽獎。

頁面結構

<ul>
    <li id="draw_{{id}}">
        {{ name }}
    </li>
    <li id="draw_{{id}}">
        {{ name }}
    </li>
    <li id="draw_{{id}}">
        {{ name }}
    </li>
</ul>
複製代碼

處理數據

因爲九宮格中間須要放一個點擊按鈕，而且滾動的時候是圍繞中間的按鈕按順時針滾動。

藍色字是未排序的， 紅色字是排序後的， 如今按照此圖的順序對數據進行排序

handleValue( obj ) {
    const _action = {
        'draw_3': _ => {
            this.Swap( obj, 3, obj.length - 1);
        },
        'draw_4': _ => {
            this.Swap( obj, 4, obj.length - 1);
        },
        'draw_5': _ => {
            this.Swap( obj, 5, obj.length - 2);
        }
    }

    for( let i in _action ) {
        const branch = _action[`${i}`];
        branch.call(this);
    }
    return obj
            .slice(0,4)
            .concat({ id: 77, text: '開始抽獎' })
            .concat(obj.slice(4));
},

Swap( obj, begin, end) {
    let temp = obj[begin];
    obj[begin] = obj[end];
    obj[end] = temp;
}

複製代碼

• 當下標爲3的時候其實是最後一個獎品手錶調用Swap將下標3以及下標7兩個獎品調換位置；
• 當下標爲4的時候，這個位置應該是放下標爲3的數據，經歷第一輪的替換下標3的位置此刻放在下標7的位置上因此咱們此次調用Swap將下標4以及下標3兩個獎品調換位置；
• 當下標爲5的時候應當和下標6互換，完成這一步後就排序完成了；
• 最後是插入抽獎按鈕，先切割前4條數據在接上按鈕最後在接上後4條數據就造成了一個九宮格；

轉動實現

定時器開啓後下標快速疊加而且添加高亮樣式。

run( vm, num ) {
    if ( num != 'draw_77' ) return;
    setTimeout( _ => {
        prize = Math.floor( Math.random() * 8 );
    },1000);
    // 存儲li的dom
    gather = vm.find('li')
    this.lottery( 10 );
},

lottery( time ) {
    if ( time < 600 ) {
        this.dilution( time, 0.1 );
        return false;
    }
    // 若是time超過600 此刻當前的下標不等於最終的獎品的下標的話 則再次進行降速
    if ( activeIndex != prize ) {
        this.dilution( time, 0.05 );
    } else {
        setTimeout( _ => {
            // 若是抽中的是-1就轉成最後一個 -1表明的是最後一個獎項
            const tips = coordinate[activeIndex] == -1 ? 8 : coordinate[activeIndex];
            alert(`恭喜抽中${_obj[tips].text}`);
            Alltime = null;
        },10);
    }

},
// coordinate = [0,1,2,5,-1,8,7,6,3];
dilution( time, second ) {
    Alltime = setTimeout( _ => {
        let ask = activeIndex + 1;              // 累計累加下標
        activeIndex = ask % 9;
        gather.eq(coordinate[activeIndex])      // 獲取此刻該添加高亮樣式的元素
                .addClass('active')             // 添加高亮樣式
                .siblings('.active')            // 篩選出active全部的同級元素
                .removeClass('active');         // 刪除同級元素的高亮樣式
        this.lottery( time + time * second );
    }, time )
}
複製代碼

• 只有點擊到按鈕時纔會進行滾動， prize是最終的獎品的下標，gather存儲全部的li元素;
• 若是是根據滾動的下標添加高亮樣式，一旦滾起來是不規律的由於在處理數據的時候進行了位置交換，你看到的位置是下標3但實際上他是下標7，因此咱們須要制定一個滾動順序coordinate，快速滾動對應的下標應該是哪個高亮。

最後

以上的代碼稍微改動就能夠套用到Vue Reatc上，工做上開發這種營銷組件的需求很多，咱們也應當多寫多練。 源碼在這 感謝你們的閱讀，但願看完你們能有所收穫！ 以爲有用就點個贊吧，你的點贊是我創做的最大動力~