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

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

function getRand($proArr) {

$result = '';

//概率數組的總概率精度

$proSum = array_sum($proArr);

//概率數組循環

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

$randNum = mt_rand(1, $proSum);

if ($randNum <= $proCur) {

$result = $key;

break;

} else {

$proSum -= $proCur;

}

}

unset ($proArr);

return $result;

}

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

php經典概率算法解析

(原諒我為了輸這分數，還去百度了一下，囧…)

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

//獎項數據

$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朵，繼續努力','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是角度，最小角度與最大角度用‘-’隔開，有多個。這個角度是控制轉盤或指針最終停下來時離起點的角度，范圍是0~360。根據實際素材而定，我這找的圖不規則，作圖的人坑爹，調了多次才得到比較精準的角度。v則是概率。

根據上面的獎項設定，通過下面的函數返回轉動信息到前臺：

//獲得旋轉信息

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);

}

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

現在時間凌晨1：52，夜已深，后面繼續。。。

2014/5/14 23:13，繼續。

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

$(".youpan").noUiSlider({

start:[10],//起始值

range:{//范圍

'min':0,

'max':99,

},

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

serialization: {

lower: [

$.Link({

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

})

],

format: {

decimals: 0,//數值保留幾位小數

mark: ','

}

}

});

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

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;}

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

function rotate() {

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

$("#start").rotate({

bind:{

click:function(){

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

var value=getPrize();

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

$(this).rotate({

duration:value.duration,//多少毫秒內完成轉動

angle:0,//起始角度

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

easing:eval(effect),//轉動動畫擴展

callback:function(){//結束時的回調函數

alert(value.message);

}

})

}

}

})

}

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

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

update：2015/06/17

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

//獎項數據

$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朵，繼續努力','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),

);

//根據獎項數據獲得具體獎項

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);//隨機數

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

return $v;

}else{

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

}

}

}

//獲得旋轉信息

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

鑒于經常有人問要源代碼打包，其實是只是很基本的一點東西而已，離應用于實際項目還有很長距離。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。