写一个九格老虎机

去年开始，抽奖活动的形式发生了一些变化。圆形的轮盘都已告别历史舞台，九格轮盘成为了主流。调研了一早上，这里出一个简化版。

首先用css画九个格子，如下

Paste_Image.png

这个东西的逻辑是，点击开始后，获得结束位置，随机分配一些圈数。
对于非连续的跳跃，使用setTimeout来控制旋转速度。

function roulette() {
       
        this._startbox = 0;         //起点位置
        this._endbox = 1;          //终点位置
        this._jumpnum = 24;        //路径中所经历的格子数
        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); //返回当前这一步的耗时
            self.showbox(jumpindex); //对显示进行控制
            jumpindex++;
            if (jumpindex >= jumpmax) {
                clearTimeout(timer);
                self._startbox = self._endbox;    //终点作为下次起点
                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;
        }
    }

重点是做出加速减速的感觉。其他没啥了。