-
超级简单的原理：
点击转盘指针后随机得到一个数(每个数字对应一个奖项),并确定每个奖项在轮盘上的大概角度，然后调用 jqueryRotate.js插件来转动轮盘，并停在奖品的对应角度。 -
使用的插件
jquery.js
jqueryRotate.js //旋转插件
附赠链接: rotate.js使用说明 https://www.jianshu.com/p/b632a1ed6a57 -
实现的效果
抽奖转盘.gif
-
实现代码
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>
CSS
<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
$(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, '免单4999元');
break;
case 2:
rotateFn(88, '免单50元');
break;
case 3:
rotateFn(137, '免单10元');
break;
case 4:
rotateFn(185, '免单5元');
break;
case 5:
rotateFn(185, '免单5元');
break;
case 6:
rotateFn(235, '免分期服务费');
break;
case 7:
rotateFn(287, '提高白条额度');
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;
}
})
}
})
不知道朋友们有没有发现，这个抽奖转盘中奖率会不会太高了一点，这要是用于实际操作岂不是要亏到死，所以接下来我们就要改变它的中奖概率啦
方法一：
往前面的JS看，在case 8 ,9 ,10是不是都是在重复操作，这是在干什么呢？...最笨的方法，增加“未中奖”的
概率，通过增加随机数（原本只需要在07中选，现在在010中选，有4/11的可能性不中奖）来增加不中奖
的 可能性
方法二：
在0~7中抽取随机数的时候，如果抽到的是“1”（免单4999元），我就让它不要这个随机数，继续产生一个随
机数，如果又抽到“1”，我就还让他继续产生随机数，如果它还调皮继续是“1”，那么我就让它继续产生随机
数，一直到不是1就让它return。
说了这么多...还不如直接上代码
function rnd(n, m){
var num=Math.floor(Math.random()*(m-n+1)+n) //在0~7中找一个随机数
//设置概率
if(num==0||num==4||num==5||num==7){
return num;
}
else{
num=Math.floor(Math.random()*(m-n+1)+n);
if(num==0||num==4||num==5||num==7||num==3){
return num;
}
else{
num=Math.floor(Math.random()*(m-n+1)+n);
if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){
return num
}
else{
num=Math.floor(Math.random()*(m-n+1)+n);
if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){
return num
}
else{
num=Math.floor(Math.random()*(m-n+1)+n);
if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){
return num
}
else{
num=Math.floor(Math.random()*(m-n+1)+n); //抽到“免单4999元”的概率是1/117649
return num;
}
}
}
}
}
}
这种方法有什么不好呢？相信大家能看出来，实在是太多冗余的代码了！！
方法三
“方法三” = “方法一” + “方法二”
