js——构造函数手撕大转盘

基于javaScript构造函数封装的大转盘（适用于所有格式的大转盘3*3 or 4*4 or......）

①首先我们先按照这个形式写一个大转盘的如下图这是3*3的

当然这个封装适用于所有形式的大转盘 只要按照我写的html格式就可以如下。

 

当然根据你实际开发需求可以以此格式改变其div结构，接下来就道理精彩的部分了

function Large_turntable(net){//一个方法 打造大转盘(你指是一个轮子)
    this.type = net.type;//判断所有div中是否中间含有点击事件
    this.el = Array.prototype.slice.call(net.el);//大转盘的所有节点(可能包括点击事件)
    this.turns = net.turns;//大转盘的圈数
    this.lattice = net.lattice.split('*')[0];//转盘的几乘几
    this.lattice_arr = 0;//大转盘的默认关键逻辑的索引
    this.seltime = null;//计时器
    this.num = 0;//默认从第一个开始
    this.ind = 0;//真是节点的渲染索引
    this.c = false;//默认进来不是首次为最大值
    this.cout = net.cout?net.cout:35;//转圈的速率
    this.inv = net.inv-1;
    this.over = false;
    this.qus = net.turns
}
Large_turntable.prototype.play = function(){//你点击吧，点击就开始了
    this.turns =  this.c?this.qus+1:this.qus;
    if(!this.type){//点击元素节点不再里面返回false
        return false
    }
    this.ti()//开始运算
}
Large_turntable.prototype.ti = function(){//开始我的逻辑大运算（哈哈哈）
    var tim = this.lattice*this.lattice;//拿到长度
    var arr = Array.from({length : tim+1},(i,v)=>v).filter(_=>{return _%this.lattice==0&&_!=0});//拿到总长度并长度加一然后过滤掉拿到为数组[3,6,9]顺时针的走向
    this.log_time(arr,tim)

}
Large_turntable.prototype.log_time = function(arr,tim){//我丢上面是闹着玩，这里才是我的主场
    this.seltime = setInterval(()=>{
        ++this.num
        this.gaoshu();
        if(this.num>arr[0]){//大于第一个索引开始
            this.lattice_arr = this.lattice_arr>=arr.length-1?arr.length-1:++this.lattice_arr;
            if(arr[this.lattice_arr]==tim&&this.c){//说明是最大值

                if(this.ind<tim-(this.lattice-2)){//如果等于最大值的最右边
                    if(this.ind <= 1){//说明是第一位
                        this.clear_time(arr,tim);
                        return
                    }
                    this.ind = this.ind-this.lattice
                }else{
                    --this.ind
                }
            }else{
                this.ind = arr[this.lattice_arr];
                this.ind==tim?this.c = true:this.c = false
            }
        }else{
            // console.log("机那里里")
            ++this.ind;
        }
        this.doucement(this.ind)
    },this.cout)
}
Large_turntable.prototype.clear_time = function(arr,tim){//要得~计时器可以die了，对没错,也说明达到一圈了
    if(this.turns<1){
        this.stop();
        return
    }
    if(this.turns==1){//说明还有最后一圈然后进行
       this.over = true
    }
        clearInterval(this.seltime);
        this.seltime = null;
        this.num = 1;
        this.ind = 1;
        this.c = false;
        this.lattice_arr = 0;
        --this.turns;
        this.log_time(arr,tim)
}
Large_turntable.prototype.doucement = function(i){//所有的节点返现，巴啦啦

        var v = i-1;
        for(let i = 0;i<this.el.length;i++){
            this.el[i].style.background = '#fff'
        }
        if( this.over ){//说明是最后一圈

           if(v==this.inv){//说明到了
            this.stop()
           }
        }
        this.el[v].style.background = 'red'
};
Large_turntable.prototype.stop = function(){//可以停止了乖乖
    clearInterval(this.seltime);
    this.seltime = null;
    // this.c = false;//默认进来不是首次为最大值
    this.over = false;
    this.cout = 25;
};
Large_turntable.prototype.gaoshu = function(){//我滴小乖乖，算法走一下
    this.cout+=10
};

 

②.创建实例需要传入6个参数

 

el:为所有的元素节点。

turns : 转盘的圈数。

lattice : 表格数量仅支持(3*3/4*4/5*5......这种格式的字符串传入进去)

cout : 转盘的速率

inv : 想要得奖的下标。

③ 到此我们large.play()就可以进行愉快的游戏时间了（gif有帧丢失，实际过程不存在跳格）。

 如发现有漏洞或者可编辑的代码请评论留言。为代码世界贡献多一份力量(实际根据业务需求，要进行适当的调整，本文章只是做出来功能展示)