-
超级简单的原理：
点击转盘指针后随机得到一个数(每个数字对应一个奖项),并确定每个奖项在轮盘上的大概角度，然后调用 jqueryRotate.js插件来转动轮盘，并停在奖品的对应角度。 -
使用的插件
jquery.js
jqueryRotate.js //旋转插件
附赠链家：rotate.js使用说明 https://www.jianshu.com/p/b632a1ed6a57 -
实现的效果
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/117649return num;}}}}}}
这种方法有什么不好呢？相信大家能看出来，实在是太多冗余的代码了！！
方法三
“方法三” = “方法一” + “方法二”
