基于javaScript建構式封裝的大轉盤（適用于所有格式的大轉盤3*3 or 4*4 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){//說明是最大值
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 }

②.創建實體需要傳入6個引數

el:為所有的元素節點，

turns : 轉盤的圈數，

lattice : 表格數量僅支持(3*3/4*4/5*5......這種格式的字串傳入進去)

cout : 轉盤的速率

inv : 想要得獎的下標，

③ 到此我們large.play()就可以進行愉快的游戲時間了（gif有幀丟失，實際程序不存在跳格），

 如發現有漏洞或者可編輯的代碼請評論留言，為代碼世界貢獻多一份力量

標籤：其他

上一篇：35.從幾十元的打賞到十多萬元的合同，前途在哪里？

下一篇：彈性配置為構建提速 - CODING & 騰訊云 CVM 最佳實踐