轉(zhuǎn)盤抽獎，炫麗的一般是flash做的。不懂flash而又不需要那么炫麗，可以簡單的通過jquery來實(shí)現(xiàn)。網(wǎng)上教程有很多，跟著做了一下，也貼出來吧。要實(shí)現(xiàn)轉(zhuǎn)盤抽獎，有兩個關(guān)鍵點(diǎn)，一是讓轉(zhuǎn)盤或指針轉(zhuǎn)起來并控制停止角度，一是概率控制。

對于轉(zhuǎn)起來控制停止角度這個問題，網(wǎng)上各教程都是用的jqueryrotate這個jquery插件，兼容性好使用也簡單，要我本人自己寫也不知道怎么寫好，還是拿來即可。對于概率控制，網(wǎng)上也一致的是這個經(jīng)典算法：

function getRand($proArr) {

$result = '';

//概率數(shù)組的總概率精度

$proSum = array_sum($proArr);

//概率數(shù)組循環(huán)

foreach ($proArr as $key => $proCur) {

$randNum = mt_rand(1, $proSum);

if ($randNum <= $proCur) {

$result = $key;

break;

} else {

$proSum -= $proCur;

}

}

unset ($proArr);

return $result;

}

這里參數(shù)是一個概率數(shù)組，某一項的出現(xiàn)的概率是其概率精度/總概率精度。比如概率數(shù)組是array(‘1’=>’40’,’2’=>’60’)，那么‘1’這一項出現(xiàn)的概率就是40/(40+60)。為什么是這個結(jié)果呢，好吧，簡單的概率計算：

php經(jīng)典概率算法解析

(原諒我為了輸這分?jǐn)?shù)，還去百度了一下，囧…)

對于概率數(shù)組的來源，實(shí)際應(yīng)用中應(yīng)該是從數(shù)據(jù)庫里面取，這樣方便做各種業(yè)務(wù)判斷，比如某一獎項的概率除了人工干預(yù)還根據(jù)抽中次數(shù)自動變化。我這里為了顯示，就寫到一個數(shù)組里面，而且這找的轉(zhuǎn)盤素材同一獎項還有多處出現(xiàn)，故用這樣一個數(shù)組來存儲(這里根據(jù)實(shí)際業(yè)務(wù)而定，不是重點(diǎn))。

//獎項數(shù)據(jù)

$prize_arr=array(

'youpan'=>array('angle'=>array('16-40','196-220'),'prize'=>'U盤1個','v'=>10),

'money_2000'=>array('angle'=>array('46-74','170-194'),'prize'=>'2000元代金卷','v'=>5),

'chong_10'=>array('angle'=>array('80-104','226-250'),'prize'=>'10元充值卡','v'=>10),

'money_1000'=>array('angle'=>array('110-134','256-284'),'prize'=>'1000元代金卷','v'=>15),

'flower'=>array('angle'=>array('144-164','286-306'),'prize'=>'鮮花1朵，繼續(xù)努力','v'=>45),

'chong_50'=>array('angle'=>array('316-340'),'prize'=>'50元充值卡','v'=>5),

'book'=>array('angle'=>array('0-10','346-359'),'prize'=>'書1本','v'=>10),

);

angel是角度，最小角度與最大角度用‘-’隔開，有多個。這個角度是控制轉(zhuǎn)盤或指針最終停下來時離起點(diǎn)的角度，范圍是0~360。根據(jù)實(shí)際素材而定，我這找的圖不規(guī)則，作圖的人坑爹，調(diào)了多次才得到比較精準(zhǔn)的角度。v則是概率。

根據(jù)上面的獎項設(shè)定，通過下面的函數(shù)返回轉(zhuǎn)動信息到前臺：

//獲得旋轉(zhuǎn)信息

function getRotate($prize_arr) {

$data=array();

$option=$_GET;//根據(jù)前臺的選擇更改原定默認(rèn)概率

foreach($prize_arr as $k=>&$v) {

$v['v']=$option[$k];

}

$prize=getPrize($prize_arr);//通過概率原理設(shè)計函數(shù)獲得其中一個獎項

$angle=$prize['angle'];

shuffle($angle);//打亂角度數(shù)組

$angle=$angle[0];

$angle_arr=explode('-',$angle);

$min=$angle_arr[0];

$max=$angle_arr[1];

$angle=mt_rand($min,$max);

$data['angle']=$angle;

$data['message']=$prize['prize'];

$data['duration']=mt_rand(2,5)*1000;

$data['n']=mt_rand(3,6);//為了不那么單調(diào)，隨機(jī)一下轉(zhuǎn)動時間和轉(zhuǎn)動圈數(shù)

echo json_encode($data);

}

至此后端的程序完畢。前端還得有個調(diào)整概率的功能，腦子里想到的就是滑動條，html5有這個特性，但樣式簡單也兼容性也有問題。百度了一下知道jqueryui有相關(guān)控件，但不怕笑話作為新人還沒用過jqueryui，無意發(fā)現(xiàn)了noUiSlider這個專為不使用jqueryui實(shí)現(xiàn)滑動條而生的插件，短小精悍。最近又瞄了瞄BootStrap，順手又拿來排版一下這前端頁面，好吧，基本沒用到它的什么東西。

現(xiàn)在時間凌晨1：52，夜已深，后面繼續(xù)。。。

2014/5/14 23:13，繼續(xù)。

對于改變概率值，上邊說了使用noUiSlider，用法可以到官網(wǎng)查看：

$(".youpan").noUiSlider({

start:[10],//起始值

range:{//范圍

'min':0,

'max':99,

},

connect:'lower',//寫上左邊就變色

serialization: {

lower: [

$.Link({

target: $('#youpan')//數(shù)值在哪里顯示

})

],

format: {

decimals: 0,//數(shù)值保留幾位小數(shù)

mark: ','

}

}

});

在頁面加載函數(shù)里邊給每個需要滑動的元素綁定以上事件即可。更改各項值放在一個form表單，點(diǎn)擊開始抽獎收集表單的信息ajax發(fā)送到后臺計算出具體的旋轉(zhuǎn)信息，再進(jìn)行轉(zhuǎn)動抽獎。發(fā)送ajax的函數(shù)如下：

function getPrize() {

var result=null;

var option=$("#myform").serialize();

$.ajax({

url:"03.php",

type:"GET",

data:option,

dataType:"json",

cache:false,

async:false,//同步，否則無法把后臺信息信息捕獲

error:function(){

alert('出錯了');

return false;

},

success:function(data){

result=data;

}

});

return result;}

接下來是關(guān)鍵的根據(jù)后臺的信息進(jìn)行轉(zhuǎn)動并控制停止角度，主要是jqueryrotate的用法，詳細(xì)的可以點(diǎn)擊上邊高亮的鏈接查看。下邊也有注釋：

function rotate() {

$("#start").css("cursor","pointer");

$("#start").rotate({

bind:{

click:function(){

$(this).unbind('click').css("cursor","default");//取消點(diǎn)擊事件

var value=getPrize();

var effect=$("#select").val();

$(this).rotate({

duration:value.duration,//多少毫秒內(nèi)完成轉(zhuǎn)動

angle:0,//起始角度

animateTo:value.n*360+value.angle,//一共轉(zhuǎn)動多少角度

easing:eval(effect),//轉(zhuǎn)動動畫擴(kuò)展

callback:function(){//結(jié)束時的回調(diào)函數(shù)

alert(value.message);

}

})

}

}

})

}

轉(zhuǎn)動動畫那里，注意得eval()一下，否則得到的只是一個字符串不是動畫函數(shù)。這個動畫也是用的jQuery Easing這個插件，插件再借用插件，很常見的事，什么都自己寫，是很不現(xiàn)實(shí)的，童鞋。這些動畫效果用在這里有一兩個動不了，不知為何。把這個rotate函數(shù)放到頁面加載函數(shù)中，在頁面加載完畢即可進(jìn)行轉(zhuǎn)動抽獎。點(diǎn)擊之后取消點(diǎn)擊事件，是為了防止轉(zhuǎn)動過程中或者抽完一次后繼續(xù)點(diǎn)擊。當(dāng)然我這里有“再來一發(fā)”就是給再綁上。具體看業(yè)務(wù)需要，怎么搞都行。

至此，一個簡單的轉(zhuǎn)盤抽獎就完成了，雖然簡陋了點(diǎn)但也能滿足一般的業(yè)務(wù)需要。有什么問題或者改進(jìn)意見，歡迎各位看官提出。^~^

update：2015/06/17

鑒于有同學(xué)說不懂03.php里邊的內(nèi)容，順便貼出來吧。按需修改。

//獎項數(shù)據(jù)

$prize_arr=array(

'youpan'=>array('angle'=>array('16-40','196-220'),'prize'=>'U盤1個','v'=>10),

'money_2000'=>array('angle'=>array('46-74','170-194'),'prize'=>'2000元代金卷','v'=>5),

'chong_10'=>array('angle'=>array('80-104','226-250'),'prize'=>'10元充值卡','v'=>10),

'money_1000'=>array('angle'=>array('110-134','256-284'),'prize'=>'1000元代金卷','v'=>15),

'flower'=>array('angle'=>array('144-164','286-306'),'prize'=>'鮮花1朵，繼續(xù)努力','v'=>45),

'chong_50'=>array('angle'=>array('316-340'),'prize'=>'50元充值卡','v'=>5),

'book'=>array('angle'=>array('0-10','346-359'),'prize'=>'書1本','v'=>10),

);

//根據(jù)獎項數(shù)據(jù)獲得具體獎項

function getPrize($prize_arr) {

$proSum=0;

foreach($prize_arr as $v){

$proSum+=$v['v'];

}

foreach($prize_arr as $k=>$v){

$randNum=mt_rand(1,$proSum);//隨機(jī)數(shù)

if($randNum<=$v['v']) {

return $v;

}else{

$proSum-=$v['v'];

}

}

}

//獲得旋轉(zhuǎn)信息

function getRotate($prize_arr) {

$data=array();

$option=$_GET;

foreach($prize_arr as $k=>&$v) {

$v['v']=$option[$k];

}

$prize=getPrize($prize_arr);

$angle=$prize['angle'];

shuffle($angle);//打亂

$angle=$angle[0];

$angle_arr=explode('-',$angle);

$min=$angle_arr[0];

$max=$angle_arr[1];

$angle=mt_rand($min,$max);

$data['angle']=$angle;

$data['message']=$prize['prize'];

$data['duration']=mt_rand(2,5)*1000;

$data['n']=mt_rand(3,6);

echo json_encode($data);

//echo json_encode($option);

}

getRotate($prize_arr);

Update：2015/11/23

鑒于經(jīng)常有人問要源代碼打包，其實(shí)是只是很基本的一點(diǎn)東西而已，離應(yīng)用于實(shí)際項目還有很長距離。

代碼打包下載(引入的相關(guān)js與圖片自行復(fù)制了)：代碼打包

總結(jié)

以上是生活随笔為你收集整理的php ajax 概率 转盘,php+jquery实现转盘抽奖 概率可任意调的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。