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;
}