抽奖原理：点击转盘指针后随机得到一个数(每个数字对应一个奖项),并确定每个奖项在轮盘上的大概角度，然后调用 jqueryRotate.js插件来转动轮盘，并停在奖品的对应角度。当然也可以用抽奖的概率进行抽奖，反正就是先定好了抽中的东西，再停下来就对了。
使用插件：jquery.js
jqueryRotate.js //旋转插件
这个你们可以进行查阅学习。
html代码
<html>
<head>
<meta charset="utf-8" />
<link href="css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="bg">
<div class="pointer" id="pointer"><img src="images/pointer.png" /></div>
<div class="turntable" id="turntable"><img src="images/turntable.png" /></div>
</div>
<script src="jquery-3.3.1.min.js" type="text/javascript" rel="stylesheet"></script>
<script src="rotate.js" type="text/javascript" rel="stylesheet" ></script>
<script src="js.js" type="text/javascript"></script>
</body>
</html>
js逻辑代码方法1：
$(function(){
var bRotate=false;
$("#pointer").click(function(){
if(bRotate) return false;
var item=rnd(0,10); //生成0~10的随机数
console.log(item);
switch(item){
case 0:
rotateFn(337,'未中奖');
break;
case 1:
rotateFn(26, '中奖1');
break;
case 2:
rotateFn(88, '中奖2');
break;
case 3:
rotateFn(137, '中奖3');
break;
case 4:
rotateFn(185, '中奖4');
break;
case 5:
rotateFn(185, '中奖5');
break;
case 6:
rotateFn(235, '中奖6');
break;
case 7:
rotateFn(287, '中奖7');
break;
case 8: //增加"未中奖"概率
rotateFn(337, '未中奖');
break;
case 9:
rotateFn(337, '未中奖');
break;
case 10:
rotateFn(0, 337, '未中奖');
break;
}
})
function rnd(n,m){
var num=Math.floor(Math.floor(Math.random()*(m-n+1)+n))
return num;
}
function rotateFn(angles,txt){ //控制轮盘在angle度停下
bRotate=!bRotate;
$('#turntable').stopRotate();
$("#turntable").rotate({
angle:0, //旋转的角度
animateTo:angles+1800, //从当前角度旋转多少度
duration:3000, //持续时间
callback:function(){ //回调函数
alert(txt);
bRotate=!bRotate;
}
})
}
})
当然我们这里是把中奖概率分成10份，如果需要中奖概率更大的，我们可以分成10000份。然后1到10中奖1,11到20中奖2....其余的都是未中奖。
当然，其实工作中抽奖概率是由后端写的，我们前端的话只需要播放动画，根据后端数据让转盘停对地方就行。
有想要学习更多工作具体案例的话，可以关注公众号：诗一样的代码，一起探讨一下。
