基于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有帧丢失，实际过程不存在跳格）。
如发现有漏洞或者可编辑的代码请评论留言。为代码世界贡献多一份力量