js大转盘
基于javaScript构造函数封装的大转盘(适用于所有格式的大转盘3*3 or 4*4 or……)
①首先我们先按照这个形式写一个大转盘的如下图这是3*3的
当然这个封装适用于所有形式的大转盘 只要按照我写的html格式就可以如下。
当然根据你实际开发需求可以以此格式改变其div结构,接下来就道理精彩的部分了
1
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有帧丢失,实际过程不存在跳格)。
如发现有漏洞或者可编辑的代码请评论留言。为代码世界贡献多一份力量(实际根据业务需求,要进行适当的调整,本文章只是做出来功能展示)