js实现转盘抽奖
作者:互联网
js实现转盘抽奖
一、效果图
二、设计思路
- 第一步:先建立所有奖品的集合,设置默认转的圈数
- 第二步:设置转动的随机角度
- 第三步:转动到哪里就是最后的奖品,使用浏览器弹框弹出
- 第四步:设置每一个奖品转到的概率
三、核心代码
//先建立所有奖品的集合 var list=['免单4999元', '免单50元', '免单10元', '免单5元', '免分期服务费', '提高白条额度', '未中奖']; //抽奖的状态 var isStart=true; //获得奖品的索引 var index=null; //当前的奖品 var nowTxt=null; //点击抽奖 var pointer=document.querySelector(".pointer"); //获取rotate var rotate=document.querySelector(".rotate"); //默认转的度数 var defaultAngle=1800;//默认转五圈 var angle=360/list.length; pointer.onclick=function(){ if(isStart){ //开始抽奖 isStart=false; index=getinfo(); nowTxt=list[index]; var agl=index*angle+defaultAngle+Math.random()*angle; rotate.style.transform="rotatez("+agl+"deg)"; setTimeout(function(){ alert("奖品:"+nowTxt); isStart=true; },3000) } } function getinfo(){ var num=Math.random(); var i=null; if(num<0.03){ i=0; } else if(num<0.1){ i=1; } else if(num<0.2) { i=2;//10% } else if(num<0.35) { i=3;//15% } else if(num<0.55) { i=4;//20% } else if(num<0.85) { i=5;//30% } else{ i=6; } return i; }
标签:奖品,抽奖,else,num,var,js,rotate,转盘 来源: https://blog.csdn.net/qq_45806781/article/details/120585701