js——構造函數手撕大轉盤

時間 2020-06-29

原文原文鏈接

基於javaScript構造函數封裝的大轉盤（適用於全部格式的大轉盤33 or 44 or......）

①首先咱們先按照這個形式寫一個大轉盤的以下圖這是3*3的html

固然這個封裝適用於全部形式的大轉盤只要按照我寫的html格式就能夠以下。java

固然根據你實際開發需求能夠以此格式改變其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 }