查看演示
翻牌彩票的實現過程:首頁提供六個方塊，用數字1-6依次代表六個不同的方塊。當彩票中獎者點擊六個方塊中的壹個時，該方塊轉向背面顯示彩票中獎信息。壹個看似簡單的操作過程，包含了大量的WEB技術知識，所以本文的讀者應該熟悉jQuery和PHP。
超文本標記語言
不同於本網站上壹篇用jQuery+PHP+Mysql實現抽獎程序的文章，翻牌抽獎不提供開始和結束按鈕，由抽獎者自己決定選擇其中壹個方塊來完成抽獎，所以我們在頁面上放了六個方塊，用1-6來代表不同的方塊。
& ltul id = " prize " & gt
& lt李class="red" title= "點擊抽獎" > 1 & lt；/李& gt
& lt李class="green" title= "點擊抽獎" > 2 & lt/李& gt
& lt李class="blue" title= "點擊抽獎" > 3 & lt/李& gt
& lt李class="purple" title= "點擊抽獎" > 4 & lt/李& gt
& lt李class="olive" title= "點擊抽獎" > 5 & lt/李& gt
& lt李class="brown" title= "點擊抽獎" > 6 & lt/李& gt
& lt/ul & gt；
& ltdiv & gt& lta href = " # " id = " viewother " & gt打開其他
& ltdiv id = " data " & gt& lt/div & gt；
在html結構中，我們使用壹個無序列表來放置六個不同的方塊，每個li中的clas屬性表示方塊的顏色。列表下方是壹個鏈接a#viewother，用於完成抽獎後點擊它，查看其他方塊背面的中獎信息。默認情況下，它是隱藏的。接下來是壹個div #數據，這個數據是空的，用來臨時存放其他沒有抽中的獎項的數據。詳見後面的代碼。為了讓六個方塊並排看起來舒服，妳需要用css美化它們。詳情參考demo，CSS代碼不在本文貼出。
服務器端編程語言（Professional Hypertext Preprocessor的縮寫）
我們先來完成後臺PHP的流程。PHP的主要工作是配置獎品和相應的中獎概率。當首頁點擊翻轉壹個框時，會向後臺PHP發送壹個ajax請求。然後後臺PHP會根據配置的概率通過概率算法給出中獎結果，同時將未中獎的中獎信息以JSON數據格式發送到首頁。
我們先來看概率計算函數。
函數get_rand($proArr) {
$ result =“”；
//概率數組的總概率精度
$ proSum = array _ sum($ proArr)；
//概率數組循環
foreach ($proArr as $key = >$proCur) {
$randNum = mt_rand(1，$ proSum)；
if($ rand num & lt；= $proCur) {
$ result = $ key
打破；
}否則{
$ proSum-= $ proCur；
}
}
unset($ proArr)；
返回$ result
}
上面的代碼是壹個經典的概率算法。$proArr是壹個預設數組。假設數組為:array(100，200，300，400)。首先過濾第壹個數字是否在1，1000的概率範圍內。如果不是，就會是。最後總會有壹個符合要求的數字。就像摸盒子裏的東西。第壹個不是，第二個不是，第三個不是，最後壹個肯定是。該算法簡單且非常有效。關鍵是這個算法在我們之前的項目中已經得到了應用，尤其是在數據量大的項目中。
接下來，我們通過PHP配置獎勵。
$prize_arr = array(
0 ' = & gt數組(' id ' = & gt1，'獎' = & gtTablet '，' v ' = & gt1),
1 ' = >；數組(' id ' = & gt2，‘獎品’= & gt；數碼相機'，' v ' = & gt5),
2 ' = >；數組(' id ' = & gt3，‘獎品’= & gt；揚聲器設備'，' v ' = & gt10),
3 ' = >；數組(' id ' = & gt4，‘獎品’= & gt；4Gu盤'，' v ' = & gt12),
4 ' = >；數組(' id ' = & gt5，‘獎品’= & gt；10Q幣'，' v ' = & gt22),
5 ' = >；數組(' id ' = & gt6、‘獎’= & gt；也許下次妳能贏'，' v ' = & gt50),
);
是壹個二維數組，記錄了本次彩票的所有中獎信息，其中id代表中獎等級，prize代表獎金，V代表中獎概率。註意V必須是整數。可以將對應獎項的V設置為0，表示獲獎概率為0，數組中V的和(radix)。基數越大，概率越準確。在這個例子中，V的和是100，所以平板電腦的中獎概率是1%。如果V的和是10000，中獎概率是萬分之壹。
每次首頁請求時，PHP循環獎項設置數組，通過概率計算函數get_rand獲取抽取的獎項id。將中獎的獎品保存在數組$res['yes']，未中獎的剩余信息保存在$res['no']，最後將json號碼數據輸出到首頁。
foreach($ prize _ arr as $ key = & gt；$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 & ltcount($ prize _ arr)；$i++){
$ pr[]= $ prize _ arr[$ I][' prize ']；
}
$ RES[' no ']= $ pr；
echo JSON _ encode($ RES)；
直接輸出中獎信息就行了，為什麽還要把沒中獎的信息也輸出到首頁？請看後面的前端代碼。
jQuery
首先，為了達到翻轉效果，我們需要預裝翻轉插件和jquery、jqueryui相關插件:
& ltscript type = " text/JavaScript " src = " js/jquery-1 . 7 . 2 . min . js " & gt；& lt/script & gt；
& ltscript type = " text/JavaScript " src = " js/jquery-ui-1 . 7 . 2 . custom . min . js " & gt；& lt/script & gt；
& ltscript type = " text/JavaScript " src = " js/jquery . flip . min . js " & gt；& lt/script & gt；
可以在官網:http://lab.smashup.it/flip/.了解更多翻轉插件
接下來，我們通過點擊頁面上的方框來完成抽獎。
$(function(){
$(“#獎李”)。each(function(){
var p = $(這個)；
var c = $(這個)。attr(' class ')；
p.css("背景色"，c)；
p.click(function(){
$(“#獎李”)。取消綁定(“單擊”)；
$.getJSON("data.php "，function(json){
var prize = json.yes//抽取的獎品。
翻頁({
方向:' rl '，//轉彎方向rl:從右向左。
內容:獎品，//翻轉後顯示的內容就是獎品。
顏色:c，//背景色
OnEnd: function(){ //翻轉。
p.css({"font-size":"22px "，" line-height ":" 100 px " })；
p.attr("id "，" r ")；//標記中獎盒子的id。
$("#viewother ")。show()；//顯示視圖其他按鈕
$(“#獎李”)。解除綁定(“點擊”)
。css(“光標”，“默認”)。remove attr(" title ")；
}
});
$("#data ")。data("nolist "，JSON . no)；//保存中獎信息。
});
});
});
});
在代碼中，首先遍歷六個正方形，並為每個正方形初始化不同的背景顏色。點擊當前方塊後，使用$.getJSON向後臺data.php發送壹個ajax請求，請求成功後，調用翻轉插件翻轉方塊。翻轉後標記中獎框id，凍結方塊上的點擊事件，即unbind('click ')，這樣抽獎只能抽壹次。最後，未選中的獎品信息通過data()存儲在#data中。
其實搖號到這壹步已經完成了。為了能看到其他方塊背面藏著什麽，我們給出了壹個抽獎後看到其他方塊背面的鏈接。點擊此鏈接，其他五個方塊將旋轉，並顯示背面的獎品信息。
$(function(){
$("#viewother ")。單擊(函數(){
var mydata = $("#data ")。數據(“nolist”)；//獲取數據
var my data 2 = eval(my data)；//JSON可以通過eval()函數轉換成數組。
$(“#獎李”)。而不是($('#r')[0])。每個(函數(索引){
var pr = $(這個)；
pr.flip({
方向:' bt '，
顏色:'淺灰色'，
內容:mydata2[index]，//獎品信息(未抽取)
onEnd:function(){
pr.css({"font-size":"22px "，" line-height":"100px "，" color ":" # 333 " })；
$("#viewother ")。hide()；
}
});
});
$("#data ")。remove data(" no list ")；
});
});
當妳點擊#viewother，就可以得到彩票中保存的中獎數據，轉換成壹個數組，翻轉五個方塊，在相應的方塊中顯示中獎信息。最終效果圖:
為什麽我中不了大獎？
在許多類似的抽獎活動中，參與者往往無法贏得大獎。我從程序的角度給妳舉個例子。如果我是抽獎活動的組織者，我設置了六個獎項，每個獎項都有不同的中獎概率。如果壹等獎是壹輛豪華轎車，但我把它的中獎概率設為0，這意味著什麽？這意味著，參與抽獎的人無論怎麽抽，都永遠得不到這輛豪華轎車。而組織者每翻壹次剩下的方塊，參與者就會發現，頭獎可能就在剛剛抽到的方塊旁邊的壹個數字下面，都怪自己運氣不好。真的是運氣不好嗎？事實上，當參與者翻轉盒子時，程序已經決定了獲勝的獎品，但他們通過翻轉其他盒子看到的獎品只是壹個煙霧彈，這讓觀眾和參與者感到困惑。我想看完這篇文章，妳可能知道電視節目中的翻牌彩票是有貓膩的，妳可能再也不會選擇雙色球了。
bug修復:感謝熱心網友漢川和眼淚對可以連續翻轉的BUG的反饋。解決方案是在ajax之前限制click事件在點擊事件後插入代碼:
$(“#獎李”)。取消綁定(“單擊”)；