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

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

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

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

 1 function Large_turntable(net){//一个方法 打造大转盘(你指是一个轮子)
 2     this.type = net.type;//判断所有div中是否中间含有点击事件
 3     this.el = Array.prototype.slice.call(net.el);//大转盘的所有节点(可能包括点击事件)
 4     this.turns = net.turns;//大转盘的圈数
 5     this.lattice = net.lattice.split('*')[0];//转盘的几乘几
 6     this.lattice_arr = 0;//大转盘的默认关键逻辑的索引
 7     this.seltime = null;//计时器
 8     this.num = 0;//默认从第一个开始
 9     this.ind = 0;//真是节点的渲染索引
10     this.c = false;//默认进来不是首次为最大值
11     this.cout = net.cout?net.cout:35;//转圈的速率
12     this.inv = net.inv-1;
13     this.over = false
14 }
15 Large_turntable.prototype.play = function(){//你点击吧，点击就开始了
16     if(!this.type){//点击元素节点不再里面返回false
17         return false
18     }
19     this.ti()//开始运算
20 }
21 Large_turntable.prototype.ti = function(){//开始我的逻辑大运算（哈哈哈）
22     var tim = this.lattice*this.lattice;//拿到长度
23     var arr = Array.from({length : tim+1},(i,v)=>v).filter(_=>{return _%this.lattice==0&&_!=0});//拿到总长度并长度加一然后过滤掉拿到为数组[3,6,9]顺时针的走向
24     this.log_time(arr,tim)
25 }
26 Large_turntable.prototype.log_time = function(arr,tim){//我丢上面是闹着玩，这里才是我的主场
27     this.seltime = setInterval(()=>{
28         ++this.num
29         this.gaoshu()
30         if(this.num>arr[0]){//大于第一个索引开始
31             this.lattice_arr = this.lattice_arr>=arr.length-1?arr.length-1:++this.lattice_arr;
32             if(arr[this.lattice_arr]==tim&&this.c){//说明是最大值
33 
34                 if(this.ind<tim-(this.lattice-2)){//如果等于最大值的最右边
35                     if(this.ind <= 1){//说明是第一位
36                         this.clear_time(arr,tim);
37                         return
38                     }
39                     this.ind = this.ind-this.lattice
40                 }else{
41                     --this.ind
42                 }
43             }else{
44                 this.ind = arr[this.lattice_arr];
45                 this.ind==tim?this.c = true:this.c = false
46             }
47         }else{
48             ++this.ind
49         }
50         this.doucement(this.ind)
51     },this.cout)
52 }
53 Large_turntable.prototype.clear_time = function(arr,tim){//要得~计时器可以die了，对没错,也说明达到一圈了
54     if(this.turns<1){
55         this.stop();
56         return
57     }
58     if(this.turns==1){//说明还有最后一圈然后进行
59        this.over = true
60     }
61         clearInterval(this.seltime);
62         this.seltime = null;
63         this.num = 1;
64         this.ind = 1;
65         this.c = false;
66         this.lattice_arr = 0;
67         --this.turns;
68         this.log_time(arr,tim)
69 }
70 Large_turntable.prototype.doucement = function(i){//所有的节点返现，巴啦啦
71         var v = i-1;
72         for(let i = 0;i<this.el.length;i++){
73             this.el[i].style.background = '#fff'
74         }
75         if( this.over ){//说明是最后一圈
76            if(v==this.inv){//说明到了
77             this.stop()
78            }
79         }
80         this.el[v].style.background = 'red'
81 } 
82 Large_turntable.prototype.stop = function(){//可以停止了乖乖
83     clearInterval(this.seltime);
84     this.seltime = null;
85 }
86 Large_turntable.prototype.gaoshu = function(){//我滴小乖乖
87     this.cout+=5
88     
89 }