php+jquery實現轉盤抽獎 機率可任意調

 php+jquery實現轉盤抽獎 機率可任意調

php+jquery實現轉盤抽獎 機率可任意調

Posted by: xiaomiao  2014/05/13in Code, PHP 3 Comments

php+jquery實現轉盤抽獎

查看DEMO演示

轉盤抽獎，炫麗的通常是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經典機率算法解析

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裏邊的內容，順便貼出來吧。按需修改。

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

     

}