PHP+jQuery翻板抽獎(jiǎng)功能實(shí)現(xiàn)
翻板抽獎(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
與本站上篇文章不同的是,翻板抽獎(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]['prize']; } $res['no'] = $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)的方塊中。最終效果圖:
我想看完這篇文章后,大家或許就會(huì)知道電視節(jié)目中的翻板抽獎(jiǎng)貓膩了,可能再不會(huì)參與了。
總之,希望大家可以從小編整理的這篇文章中有所收獲,對(duì)大家學(xué)習(xí)php編程有所幫助。
相關(guān)文章
Yii框架 session 數(shù)據(jù)庫(kù)存儲(chǔ)操作方法示例
這篇文章主要介紹了Yii框架 session 數(shù)據(jù)庫(kù)存儲(chǔ)操作方法,結(jié)合實(shí)例形式分析了使用Yii框架session組件配置與數(shù)據(jù)庫(kù)存儲(chǔ)相關(guān)操作技巧,需要的朋友可以參考下2019-11-11ThinkPHP 3.2.2實(shí)現(xiàn)事務(wù)操作的方法
這篇文章主要介紹了ThinkPHP 3.2.2實(shí)現(xiàn)事務(wù)操作的方法,簡(jiǎn)單分析了thinkPHP中事務(wù)的啟動(dòng)、提交、回滾等操作方法并給出了完整的事務(wù)提交與回滾操作實(shí)例,需要的朋友可以參考下2017-05-05解決在laravel中auth建立時(shí)候遇到的問(wèn)題
今天小編就為大家分享一篇解決在laravel中auth建立時(shí)候遇到的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10THINKPHP5分頁(yè)數(shù)據(jù)對(duì)象處理過(guò)程解析
這篇文章主要介紹了THINKPHP5分頁(yè)數(shù)據(jù)對(duì)象處理過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10ThinkPHP獨(dú)立分組使用的注意事項(xiàng)
這篇文章主要介紹了ThinkPHP獨(dú)立分組使用的注意事項(xiàng),針對(duì)獨(dú)立分組的目錄結(jié)構(gòu)與分組之間的相互調(diào)用進(jìn)行了較為深入的分析,并指出了使用時(shí)的注意事項(xiàng),需要的朋友可以參考下2014-11-11php-fpm重啟導(dǎo)致的程序執(zhí)行中斷問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于php-fpm重啟導(dǎo)致的程序執(zhí)行中斷問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Laravel 5使用Laravel Excel實(shí)現(xiàn)Excel/CSV文件導(dǎo)入導(dǎo)出的功能詳解
這篇文章主要給大家介紹了關(guān)于在Laravel 5中如何使用Laravel Excel實(shí)現(xiàn)Excel/CSV文件導(dǎo)入導(dǎo)出功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下。2017-10-10