在電視節目中有一種抽獎形式暫且叫做翻板抽獎，臺上有一個牆面，牆面放置幾個大方塊，主持人或者抽獎者翻開對應的方塊即可揭曉中獎結果。類似的抽獎形式還可以應用在WEB中，本文將使用PHP+jQuery爲您講解如何實現翻板抽獎程序。
翻板抽獎的實現流程：前端頁面提供6個方塊，用數字1-6依次表示6個不同的方塊，當抽獎者點擊6個方塊中的某一塊時，方塊翻轉到背面，顯示抽獎中獎信息。看似簡單的一個操作過程，卻包含着WEB技術的很多知識面，所以本文的讀者應該熟練掌握jQuery和PHP相關知識。
HTML
與本站上篇文章使用jQuery+PHP+Mysql實現抽獎程序不同的是，翻板抽獎不提供開始和結束抽獎按鈕，抽獎者自己決定選取其中的某一個方塊，來完成抽獎的，所以我們在頁面中放置6個方塊，並且用1-6來表示不同的方塊。
<ul id="prize">
<li class="red" title="點擊抽獎">1</li>
<li class="green" title="點擊抽獎">2</li>
<li class="blue" title="點擊抽獎">3</li>
<li class="purple" title="點擊抽獎">4</li>
<li class="olive" title="點擊抽獎">5</li>
<li class="brown" title="點擊抽獎">6</li>
</ul>
<div><a href="#" id="viewother">【翻開其他】</a></div>
<div id="data"></div>
html結構中，我們使用一個無序列表放置6個不同的方塊，每個li中的clas屬性表示該方塊的顏色，列表下面是一個鏈接a#viewother，用來完成抽獎後，點擊它，翻看其他方塊背面的中獎信息，默認是隱藏的。接下來還有一個div#data，它是空的，作用是用來臨時存儲未抽中的其他獎項數據，具體情況看後面的代碼。爲了讓6個方塊並排看起來舒服點，您還需要用CSS來美化下，具體可參照demo，本文中不再貼出css代碼。
PHP
我們先完成後臺PHP的流程，PHP的主要工作是負責配置獎項及對應的中獎概率，當前端頁面點擊翻動某個方塊時會想後臺PHP發送ajax請求，那麼後臺PHP根據配置的概率，通過概率算法給出中獎結果，同時將未中獎的獎項信息一併以JSON數據格式發送給前端頁面。
先來看概率計算函數
function get_rand($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;
}
上述代碼是一段經典的概率算法，$proArr是一個預先設置的數組，假設數組爲：array(100,200,300，400)，開始是從1,1000這個概率範圍內篩選第一個數是否在他的出現概率範圍之內， 如果不在，則將概率空間，也就是k的值減去剛剛的那個數字的概率空間，在本例當中就是減去100，也就是說第二個數是在1，900這個範圍內篩選的。這樣篩選到最終，總會有一個數滿足要求。就相當於去一個箱子裏摸東西，第一個不是，第二個不是，第三個還不是，那最後一個一定是。這個算法簡單，而且效率非常高，關鍵是這個算法已在我們以前的項目中有應用，尤其是大數據量的項目中效率非常棒。
接下來我們通過PHP配置獎項。
$prize_arr = array(
'0' => array('id'=>1,'prize'=>'平板電腦','v'=>1),
'1' => array('id'=>2,'prize'=>'數碼相機','v'=>5),
'2' => array('id'=>3,'prize'=>'音箱設備','v'=>10),
'3' => array('id'=>4,'prize'=>'4G優盤','v'=>12),
'4' => array('id'=>5,'prize'=>'10Q幣','v'=>22),
'5' => array('id'=>6,'prize'=>'下次沒準就能中哦','v'=>50),
);
中是一個二維數組，記錄了所有本次抽獎的獎項信息，其中id表示中獎等級，prize表示獎品，v表示中獎概率。注意其中的v必須爲整數，你可以將對應的獎項的v設置成0，即意味着該獎項抽中的機率是0，數組中v的總和（基數），基數越大越能體現概率的準確性。本例中v的總和爲100，那麼平板電腦對應的中獎概率就是1%，如果v的總和是10000，那中獎概率就是萬分之一了。
每次前端頁面的請求，PHP循環獎項設置數組，通過概率計算函數get_rand獲取抽中的獎項id。將中獎獎品保存在數組$res['yes']中，而剩下的未中獎的信息保存在$res['no']中，最後輸出json個數數據給前端頁面。
foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v'];
}
$rid = get_rand($arr); //根據概率獲取獎項id
$res['yes'] = $prize_arr[$rid-1]['prize']; //中獎項
unset($prize_arr[$rid-1]); //將中獎項從數組中剔除，剩下未中獎項
shuffle($prize_arr); //打亂數組順序
for($i=0;$i<count($prize_arr);$i++){
$pr[] = $prize_arr[$i]['prize'];
}
$res['no'] = $pr;
echo json_encode($res);
直接輸出中獎信息就得了，爲何還要把未中獎的信息也要輸出給前端頁面呢？請看後面的前端代碼。
jQuery
首先爲了實現翻板效果，我們需要預先加載翻動插件及jquery，jqueryui相關插件：
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
關於flip插件您可以到其官網：http://lab.smashup.it/flip/瞭解更多信息。
接下來，我們通過單擊頁面中的方塊，來完成抽獎行爲。
$(function(){
$("#prize li").each(function(){
var p = $(this);
var c = $(this).attr('class');
p.css("background-color",c);
p.click(function(){
$.getJSON("data.php",function(json){
var prize = json.yes; //抽中的獎項
p.flip({
direction:'rl', //翻動的方向rl：right to left
content:prize, //翻轉後顯示的內容即獎品
color:c, //背景色
onEnd: function(){ //翻轉結束
p.css({"font-size":"22px","line-height":"100px"});
p.attr("id","r"); //標記中獎方塊的id
$("#viewother").show(); //顯示查看其他按鈕
$("#prize li").unbind('click')
.css("cursor","default").removeAttr("title");
}
});
$("#data").data("nolist",json.no); //保存未中獎信息
});
});
});
});
代碼中先遍歷6個方塊，給每個方塊初始化不同的背景顏色，單擊當前方塊後，使用$.getJSON向後臺data.php發送ajax請求，請求成功後，調用flip插件實現翻轉方塊，在獲取的中獎信息顯示在翻轉後的方塊上，翻轉結束後，標記該中獎方塊id，同時凍結方塊上的單擊事件，即unbind('click')，目的就是讓抽獎者只能抽一次，抽完後每個方塊不能再翻動了。最後將未抽中的獎項信息通過data()儲存在#data中。
其實到這一步抽獎工作已經完成，爲了能查看其他方塊背面究竟隱藏着什麼，我們在抽獎後給出一個可以查看其他方塊背面的鏈接。通過點擊該鏈接，其他5個方塊轉動，將背面獎項信息顯示出來。
$(function(){
$("#viewother").click(function(){
var mydata = $("#data").data("nolist"); //獲取數據
var mydata2 = eval(mydata);//通過eval()函數可以將JSON轉換成數組
$("#prize li").not($('#r')[0]).each(function(index){
var pr = $(this);
pr.flip({
direction:'bt',
color:'lightgrey',
content:mydata2[index], //獎品信息（未抽中）
onEnd:function(){
pr.css({"font-size":"22px","line-height":"100px","color":"#333"});
$("#viewother").hide();
}
});
});
$("#data").removeData("nolist");
});
});
當單擊#viewother時，獲取抽獎時保存的未抽中的獎項數據，並將其轉化爲數組，翻轉5個方塊，將獎品信息顯示在對應的方塊中。最終效果圖：
爲什麼我抽不到大獎？
在很多類似的抽獎活動中，參與者往往抽不到大獎，筆者從程序的角度舉個例給你看，假如我是抽獎活動的主辦方，我設置了6個獎項，每個獎項不同的中獎概率，假如一等獎是一臺高級轎車，可是我設置了其中獎概率爲0，這意味着什麼？這意味着參與抽獎者無論怎麼抽，永遠也得不到這臺高級轎車。而當主辦方每次翻動剩下的方塊時，參與者會發現一等獎也許就在剛剛抽獎的方塊旁邊的一個數字下，都怪自己運氣差。真的是運氣差嗎？其實在參與者翻動那個方塊時程序已經決定了中獎項，而翻動查看其他方塊看到的獎項只是一個***，迷惑了觀衆和參與者。我想看完這篇文章後，您或許會知道電視節目中的翻板抽獎貓膩了，您也許大概再不會去機選雙色球了。