-
超級簡單的原理：
點擊轉(zhuǎn)盤指針后隨機(jī)得到一個數(shù)(每個數(shù)字對應(yīng)一個獎項),并確定每個獎項在輪盤上的大概角度，然后調(diào)用 jqueryRotate.js插件來轉(zhuǎn)動輪盤，并停在獎品的對應(yīng)角度。 -
使用的插件
jquery.js
jqueryRotate.js //旋轉(zhuǎn)插件
附贈鏈接: rotate.js使用說明 http://www.itdecent.cn/p/b632a1ed6a57 -
實現(xiàn)的效果
抽獎轉(zhuǎn)盤.gif
-
實現(xiàn)代碼
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的隨機(jī)數(shù)
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, '免分期服務(wù)費(fèi)');
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, //旋轉(zhuǎn)的角度
animateTo:angles+1800, //從當(dāng)前角度旋轉(zhuǎn)多少度
duration:3000, //持續(xù)時間
callback:function(){ //回調(diào)函數(shù)
alert(txt);
bRotate=!bRotate;
}
})
}
})
不知道朋友們有沒有發(fā)現(xiàn)，這個抽獎轉(zhuǎn)盤中獎率會不會太高了一點，這要是用于實際操作豈不是要虧到死，所以接下來我們就要改變它的中獎概率啦
方法一：
往前面的JS看，在case 8 ,9 ,10是不是都是在重復(fù)操作，這是在干什么呢？...最笨的方法，增加“未中獎”的
概率，通過增加隨機(jī)數(shù)（原本只需要在07中選，現(xiàn)在在010中選，有4/11的可能性不中獎）來增加不中獎
的 可能性
方法二：
在0~7中抽取隨機(jī)數(shù)的時候，如果抽到的是“1”（免單4999元），我就讓它不要這個隨機(jī)數(shù)，繼續(xù)產(chǎn)生一個隨
機(jī)數(shù)，如果又抽到“1”，我就還讓他繼續(xù)產(chǎn)生隨機(jī)數(shù)，如果它還調(diào)皮繼續(xù)是“1”，那么我就讓它繼續(xù)產(chǎn)生隨機(jī)
數(shù)，一直到不是1就讓它return。
說了這么多...還不如直接上代碼
function rnd(n, m){
var num=Math.floor(Math.random()*(m-n+1)+n) //在0~7中找一個隨機(jī)數(shù)
//設(shè)置概率
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;
}
}
}
}
}
}
這種方法有什么不好呢？相信大家能看出來，實在是太多冗余的代碼了??！
方法三
“方法三” = “方法一” + “方法二”
