在電視節(jié)目中有一種抽獎(jiǎng)形式暫且叫做翻板抽獎(jiǎng)，臺(tái)上有一個(gè)墻面，墻面放置幾個(gè)大方塊，主持人或者抽獎(jiǎng)?wù)叻_(kāi)對(duì)應(yīng)的方塊即可揭曉中獎(jiǎng)結(jié)果。類似的抽獎(jiǎng)形式還可以應(yīng)用在WEB中，本文將使用PHP+jQuery為您講解如何實(shí)現(xiàn)翻板抽獎(jiǎng)程序。

翻板抽獎(jiǎng)的實(shí)現(xiàn)流程：前端頁(yè)面提供6個(gè)方塊，用數(shù)字1-6依次表示6個(gè)不同的方塊，當(dāng)抽獎(jiǎng)?wù)唿c(diǎn)擊6個(gè)方塊中的某一塊時(shí)，方塊翻轉(zhuǎn)到背面，顯示抽獎(jiǎng)中獎(jiǎng)信息?？此坪?jiǎn)單的一個(gè)操作過(guò)程，卻包含著WEB技術(shù)的很多知識(shí)面，所以本文的讀者應(yīng)該熟練掌握jQuery和PHP相關(guān)知識(shí)。

HTML

與本站上篇文章使用jQuery+PHP+Mysql實(shí)現(xiàn)抽獎(jiǎng)程序不同的是，翻板抽獎(jiǎng)不提供開(kāi)始和結(jié)束抽獎(jiǎng)按鈕，抽獎(jiǎng)?wù)咦约簺Q定選取其中的某一個(gè)方塊，來(lái)完成抽獎(jiǎng)的，所以我們?cè)陧?yè)面中放置6個(gè)方塊，并且用1-6來(lái)表示不同的方塊。

<ul id="prize"> 
    <li class="red" title="點(diǎn)擊抽獎(jiǎng)">1</li> 
    <li class="green" title="點(diǎn)擊抽獎(jiǎng)">2</li> 
    <li class="blue" title="點(diǎn)擊抽獎(jiǎng)">3</li> 
    <li class="purple" title="點(diǎn)擊抽獎(jiǎng)">4</li> 
    <li class="olive" title="點(diǎn)擊抽獎(jiǎng)">5</li> 
    <li class="brown" title="點(diǎn)擊抽獎(jiǎng)">6</li> 
</ul> 
<div><a href="#" id="viewother">【翻開(kāi)其他】</a></div> 
<div id="data"></div>

html結(jié)構(gòu)中，我們使用一個(gè)無(wú)序列表放置6個(gè)不同的方塊，每個(gè)li中的clas屬性表示該方塊的顏色，列表下面是一個(gè)鏈接a#viewother，用來(lái)完成抽獎(jiǎng)后，點(diǎn)擊它，翻看其他方塊背面的中獎(jiǎng)信息，默認(rèn)是隱藏的。接下來(lái)還有一個(gè)div#data，它是空的，作用是用來(lái)臨時(shí)存儲(chǔ)未抽中的其他獎(jiǎng)項(xiàng)數(shù)據(jù)，具體情況看后面的代碼。為了讓6個(gè)方塊并排看起來(lái)舒服點(diǎn)，您還需要用CSS來(lái)美化下，具體可參照demo，本文中不再貼出css代碼。

PHP

我們先完成后臺(tái)PHP的流程，PHP的主要工作是負(fù)責(zé)配置獎(jiǎng)項(xiàng)及對(duì)應(yīng)的中獎(jiǎng)概率，當(dāng)前端頁(yè)面點(diǎn)擊翻動(dòng)某個(gè)方塊時(shí)會(huì)想后臺(tái)PHP發(fā)送ajax請(qǐng)求，那么后臺(tái)PHP根據(jù)配置的概率，通過(guò)概率算法給出中獎(jiǎng)結(jié)果，同時(shí)將未中獎(jiǎng)的獎(jiǎng)項(xiàng)信息一并以JSON數(shù)據(jù)格式發(fā)送給前端頁(yè)面。

先來(lái)看概率計(jì)算函數(shù)

function get_rand($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; 
}

上述代碼是一段經(jīng)典的概率算法，$proArr是一個(gè)預(yù)先設(shè)置的數(shù)組，假設(shè)數(shù)組為：array(100,200,300，400)，開(kāi)始是從1,1000這個(gè)概率范圍內(nèi)篩選第一個(gè)數(shù)是否在他的出現(xiàn)概率范圍之內(nèi)， 如果不在，則將概率空間，也就是k的值減去剛剛的那個(gè)數(shù)字的概率空間，在本例當(dāng)中就是減去100，也就是說(shuō)第二個(gè)數(shù)是在1，900這個(gè)范圍內(nèi)篩選的。這樣篩選到最終，總會(huì)有一個(gè)數(shù)滿足要求。就相當(dāng)于去一個(gè)箱子里摸東西，第一個(gè)不是，第二個(gè)不是，第三個(gè)還不是，那最后一個(gè)一定是。這個(gè)算法簡(jiǎn)單，而且效率非常高，關(guān)鍵是這個(gè)算法已在我們以前的項(xiàng)目中有應(yīng)用，尤其是大數(shù)據(jù)量的項(xiàng)目中效率非常棒。

接下來(lái)我們通過(guò)PHP配置獎(jiǎng)項(xiàng)。

$prize_arr = array( 
    '0' => array('id'=>1,'prize'=>'平板電腦','v'=>1), 
    '1' => array('id'=>2,'prize'=>'數(shù)碼相機(jī)','v'=>5), 
    '2' => array('id'=>3,'prize'=>'音箱設(shè)備','v'=>10), 
    '3' => array('id'=>4,'prize'=>'4G優(yōu)盤(pán)','v'=>12), 
    '4' => array('id'=>5,'prize'=>'10Q幣','v'=>22), 
    '5' => array('id'=>6,'prize'=>'下次沒(méi)準(zhǔn)就能中哦','v'=>50), 
);

中是一個(gè)二維數(shù)組，記錄了所有本次抽獎(jiǎng)的獎(jiǎng)項(xiàng)信息，其中id表示中獎(jiǎng)等級(jí)，prize表示獎(jiǎng)品，v表示中獎(jiǎng)概率。注意其中的v必須為整數(shù)，你可以將對(duì)應(yīng)的獎(jiǎng)項(xiàng)的v設(shè)置成0，即意味著該獎(jiǎng)項(xiàng)抽中的幾率是0，數(shù)組中v的總和（基數(shù)），基數(shù)越大越能體現(xiàn)概率的準(zhǔn)確性。本例中v的總和為100，那么平板電腦對(duì)應(yīng)的中獎(jiǎng)概率就是1%，如果v的總和是10000，那中獎(jiǎng)概率就是萬(wàn)分之一了。

每次前端頁(yè)面的請(qǐng)求，PHP循環(huán)獎(jiǎng)項(xiàng)設(shè)置數(shù)組，通過(guò)概率計(jì)算函數(shù)get_rand獲取抽中的獎(jiǎng)項(xiàng)id。將中獎(jiǎng)獎(jiǎng)品保存在數(shù)組$res['yes']中，而剩下的未中獎(jiǎng)的信息保存在$res['no']中，最后輸出json個(gè)數(shù)數(shù)據(jù)給前端頁(yè)面。

foreach ($prize_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = get_rand($arr); //根據(jù)概率獲取獎(jiǎng)項(xiàng)id 
 
$res['yes'] = $prize_arr[$rid-1]['prize']; //中獎(jiǎng)項(xiàng) 
unset($prize_arr[$rid-1]); //將中獎(jiǎng)項(xiàng)從數(shù)組中剔除，剩下未中獎(jiǎng)項(xiàng) 
shuffle($prize_arr); //打亂數(shù)組順序 
for($i=0;$i<count($prize_arr);$i++){ 
    $pr[] = $prize_arr[$i][&#39;prize&#39;]; 
} 
$res[&#39;no&#39;] = $pr; 
echo json_encode($res);

直接輸出中獎(jiǎng)信息就得了，為何還要把未中獎(jiǎng)的信息也要輸出給前端頁(yè)面呢？請(qǐng)看后面的前端代碼。

jQuery

首先為了實(shí)現(xiàn)翻板效果，我們需要預(yù)先加載翻動(dòng)插件及jquery，jqueryui相關(guān)插件：

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

接下來(lái)，我們通過(guò)單擊頁(yè)面中的方塊，來(lái)完成抽獎(jiǎng)行為。

$(function(){ 
    $("#prize li").each(function(){ 
        var p = $(this); 
        var c = $(this).attr('class'); 
        p.css("background-color",c); 
        p.click(function(){ 
            $("#prize li").unbind('click'); 
            $.getJSON("data.php",function(json){ 
                var prize = json.yes; //抽中的獎(jiǎng)項(xiàng) 
                p.flip({ 
                    direction:'rl', //翻動(dòng)的方向rl：right to left 
                    content:prize, //翻轉(zhuǎn)后顯示的內(nèi)容即獎(jiǎng)品 
                    color:c,  //背景色 
                    onEnd: function(){ //翻轉(zhuǎn)結(jié)束 
                        p.css({"font-size":"22px","line-height":"100px"}); 
                        p.attr("id","r"); //標(biāo)記中獎(jiǎng)方塊的id 
                        $("#viewother").show(); //顯示查看其他按鈕 
                        $("#prize li").unbind('click') 
                        .css("cursor","default").removeAttr("title"); 
                    } 
                }); 
                $("#data").data("nolist",json.no); //保存未中獎(jiǎng)信息 
            }); 
        }); 
    }); 
});

代碼中先遍歷6個(gè)方塊，給每個(gè)方塊初始化不同的背景顏色，單擊當(dāng)前方塊后，使用$.getJSON向后臺(tái)data.php發(fā)送ajax請(qǐng)求，請(qǐng)求成功后，調(diào)用flip插件實(shí)現(xiàn)翻轉(zhuǎn)方塊，在獲取的中獎(jiǎng)信息顯示在翻轉(zhuǎn)后的方塊上，翻轉(zhuǎn)結(jié)束后，標(biāo)記該中獎(jiǎng)方塊id，同時(shí)凍結(jié)方塊上的單擊事件，即unbind('click')，目的就是讓抽獎(jiǎng)?wù)咧荒艹橐淮?，抽完后每個(gè)方塊不能再翻動(dòng)了。最后將未抽中的獎(jiǎng)項(xiàng)信息通過(guò)data()儲(chǔ)存在#data中。

其實(shí)到這一步抽獎(jiǎng)工作已經(jīng)完成，為了能查看其他方塊背面究竟隱藏著什么，我們?cè)诔楠?jiǎng)后給出一個(gè)可以查看其他方塊背面的鏈接。通過(guò)點(diǎn)擊該鏈接，其他5個(gè)方塊轉(zhuǎn)動(dòng)，將背面獎(jiǎng)項(xiàng)信息顯示出來(lái)。

$(function(){ 
    $("#viewother").click(function(){ 
        var mydata = $("#data").data("nolist"); //獲取數(shù)據(jù) 
        var mydata2 = eval(mydata);//通過(guò)eval()函數(shù)可以將JSON轉(zhuǎn)換成數(shù)組 
              
        $("#prize li").not($('#r')[0]).each(function(index){ 
            var pr = $(this); 
            pr.flip({ 
                direction:'bt', 
                color:'lightgrey', 
                content:mydata2[index], //獎(jiǎng)品信息（未抽中） 
                onEnd:function(){ 
                    pr.css({"font-size":"22px","line-height":"100px","color":"#333"}); 
                    $("#viewother").hide(); 
                } 
            }); 
        }); 
        $("#data").removeData("nolist"); 
    }); 
});

當(dāng)單擊#viewother時(shí)，獲取抽獎(jiǎng)時(shí)保存的未抽中的獎(jiǎng)項(xiàng)數(shù)據(jù)，并將其轉(zhuǎn)化為數(shù)組，翻轉(zhuǎn)5個(gè)方塊，將獎(jiǎng)品信息顯示在對(duì)應(yīng)的方塊中。最終效果圖：

為什么我抽不到大獎(jiǎng)？

在很多類似的抽獎(jiǎng)活動(dòng)中，參與者往往抽不到大獎(jiǎng)，筆者從程序的角度舉個(gè)例給你看，假如我是抽獎(jiǎng)活動(dòng)的主辦方，我設(shè)置了6個(gè)獎(jiǎng)項(xiàng)，每個(gè)獎(jiǎng)項(xiàng)不同的中獎(jiǎng)概率，假如一等獎(jiǎng)是一臺(tái)高級(jí)轎車(chē)，可是我設(shè)置了其中獎(jiǎng)概率為0，這意味著什么？這意味著參與抽獎(jiǎng)?wù)邿o(wú)論怎么抽，永遠(yuǎn)也得不到這臺(tái)高級(jí)轎車(chē)。而當(dāng)主辦方每次翻動(dòng)剩下的方塊時(shí)，參與者會(huì)發(fā)現(xiàn)一等獎(jiǎng)也許就在剛剛抽獎(jiǎng)的方塊旁邊的一個(gè)數(shù)字下，都怪自己運(yùn)氣差。真的是運(yùn)氣差嗎？其實(shí)在參與者翻動(dòng)那個(gè)方塊時(shí)程序已經(jīng)決定了中獎(jiǎng)項(xiàng)，而翻動(dòng)查看其他方塊看到的獎(jiǎng)項(xiàng)只是一個(gè)煙霧彈，迷惑了觀眾和參與者。我想看完這篇文章后，您或許會(huì)知道電視節(jié)目中的翻板抽獎(jiǎng)貓膩了，您也許大概再不會(huì)去機(jī)選雙色球了。

BUG修復(fù)：感謝熱心網(wǎng)友寒川和Tears反饋的關(guān)于可以連續(xù)翻動(dòng)的bug，解決辦法，在單擊事件后，ajax前限制click事件插入代碼：

$("#prize li").unbind('click');