去年開(kāi)始，抽獎(jiǎng)活動(dòng)的形式發(fā)生了一些變化。圓形的輪盤都已告別歷史舞臺(tái)，九格輪盤成為了主流。調(diào)研了一早上，這里出一個(gè)簡(jiǎn)化版。

首先用css畫(huà)九個(gè)格子，如下

Paste_Image.png

這個(gè)東西的邏輯是，點(diǎn)擊開(kāi)始后，獲得結(jié)束位置，隨機(jī)分配一些圈數(shù)。
對(duì)于非連續(xù)的跳躍，使用setTimeout來(lái)控制旋轉(zhuǎn)速度。

function roulette() {
       
        this._startbox = 0;         //起點(diǎn)位置
        this._endbox = 1;          //終點(diǎn)位置
        this._jumpnum = 24;        //路徑中所經(jīng)歷的格子數(shù)
        this._self = this;
       
}
roulette.prototype.run = function() {
        var self = this._self,
            time = 500,
            jumpmax = this._jumpnum,
            jumpindex = 0,
            timer = null;
        function timerdo() {
            time = self.changeshowlist(jumpindex); //返回當(dāng)前這一步的耗時(shí)
            self.showbox(jumpindex); //對(duì)顯示進(jìn)行控制
            jumpindex++;
            if (jumpindex >= jumpmax) {
                clearTimeout(timer);
                self._startbox = self._endbox;    //終點(diǎn)作為下次起點(diǎn)
                setTimeout(function() { console.log('finish'); }, 200);
            }
            else {
                timer = setTimeout(timerdo, time);
            }
        }
        timerdo();
    }
roulette.prototype.showbox = function(index) {
        var myIndex = ( (this._startbox + index) %  $('.blockContainer').length ) ;
        $('.blockContainer').css('backgroundColor', 'red');
        $('#'+myIndex).css('backgroundColor', 'black');
}

    //每次改變需要顯示的box，返回速度
    roulette.prototype.changeshowlist = function(jumpindex) {
        var i,
            jumpmax = this._jumpnum;
        switch (jumpindex) {
            case 0:
                
                return 400;
            case 1:
                
                return 350;
            case 2:
                
                return 300;
            case 3:
                
                return 200;
            case jumpmax - 1:
                
                return 800;
            case jumpmax - 2:
                
                return 700;
            case jumpmax - 3:
               
                return 600;
            case jumpmax - 4:
                
                return 400;
            case jumpmax - 5:
               
                return 300;
            case jumpmax - 6:
                
                return 200;
            case jumpmax - 7:
                
                return 100;
            case jumpmax - 8:
                
                return 50;
            default:
               
                return 30;
        }
    }

重點(diǎn)是做出加速減速的感覺(jué)。其他沒(méi)啥了。