PHP jQuery翻转抽奖功能的实现

棋盘抽奖的实现过程：首页提供六个区块，用数字1-6依次表示六个不同的区块。当彩票中奖者点击六个区块中的一个时，这些区块被翻转到背面以显示彩票的中奖信息。看起来是一个简单的操作过程，但是里面包含了很多WEB技术的知识，所以本文的读者应该掌握jQuery和PHP。

与HTML中的前一篇文章不同，翻转抽奖不提供开始和结束抽奖按钮，由中奖者决定选择其中一个方块来完成抽奖，所以我们在页面上放6个方块，用1-6来表示不同的方块。

ul id=' prize ' Li class=' red ' title=' click to draw ' 1/Li Li class=' green ' title=' click to draw ' 2/Li Li class=' blue ' title=' click to draw ' 3/Li Li class='紫色' title=' click to draw ' 4/Li class=' olive ' title=' click to draw ' 5/Li Li class=' brown ' title=' click to draw ' 6/Li/uldiva href=' # ' id=' view other '[打开其他div id列表下方是一个链接a#viewother，用来完成抽奖，点击它可以读取其他方块背面的中奖信息，默认是隐藏的。接下来是一个div #数据，为空，用于临时存储其他未选中奖项的数据。有关详细信息，请参见以下代码。为了让六个方块并排看起来舒服，你需要用css来美化它们。详情请参考演示。CSS代码不会在本文中发布。我们首先在后台完成PHP的流程。PHP的主要工作是配置奖励和对应的中奖概率。当首页点击并打开一个框时，它会希望后台的PHP发送一个ajax请求。然后后台的PHP会根据配置的概率，通过概率算法给出中奖结果，同时以JSON数据格式将未中奖的信息发送到首页。先看概率计算函数。

函数get _ rand($ ProArr){ $ result=' '；//概率数组的总概率精度$ proSum=array _ sum($ proArr)；//概率数组循环foreach($ proarras $ key=$ procur){ $ randnum=mt _ rand(1，$ prosum)；if($ randNum=$ proCur){ $ result=$ key；打破；} else { $ PROsum-=$ ProCur；} } unset($ ProArr)；返回$ result}上面的代码是一个经典的概率算法，$proArr是一个预设的数组，假设数组为：array(100，200，300)，首先从1，1000的概率范围中筛选出第一个数字是否在他的概率范围内，如果不在，则从刚才那个数字的概率空间中减去概率空间，也就是k的值。这样，在筛选结束时，总会有一个符合要求的数字。这相当于触摸盒子里的东西。第一个不是，第二个不是，第三个还不是，最后一个肯定是。该算法简单高效。关键是这个算法已经在我们之前的项目中得到了应用，尤其是在数据量大的项目中。接下来，我们通过PHP配置奖励。

$ prize _ arr=array(' 0 '=array(' id '=1，' prize'=' tablet '，' v'=1)，' 1'=array ('id'=2，' prize'='数码相机'，' v'=5)。3'=数组(' id'=4，' prize '=' 4G盘'，' V'=12)，' 4'=数组(' ID'=5，' PRIZE'=' 10Q硬币'，' V'=22)，v'=50'=数组。是一个二维数组，记录了本次抽奖的所有奖品信息，其中id表示中奖等级，奖品表示奖品，v表示中奖概率。注意v必须是整数。可以将对应奖项的v设置为0，表示该奖项的中奖概率为0。数组中v的和(基数)，基数越大，概率可以越准确。在这个例子中，如果v的和为100，平板电脑的中奖概率为1%，如果v的和为10000，中奖概率为万分之一。每次前端页面请求，PHP都会循环设置奖项数组，通过概率计算函数get_rand获取获奖id。将中奖信息保存在$res['是']数组中，将其余未中奖信息保存在$res['否']数组中。最后，将json编号数据输出到首页。

foreach($ prize _ arr as $ key=$ val){ $ arr[$ val[' id ']]=$ val[' v ']；} $ rid=get _ rand($ arr)；//根据概率得到奖品id $ RES[' yes ']=$ prize _ arr[$ rid-1][' prize ']；//奖品未设置($ price _ arr[$ rid-1])；//从数组中移除获胜的奖品，留下未成功的奖品洗牌($ price _ arr)；//打乱($i=0)的数组顺序；$ I count($ prize _ arr)；$ I){ $ pr[]=$ prize _ arr[$ I][' prize ']；} $ RES[' no ']=$ pr；echo JSON _ encode($ RES)；直接输出中奖信息就可以了。为什么要把不成功的信息输出到首页？请看后面的前端代码。Jquery首先，为了实现翻转效果，我们需要预加载翻转插件以及jQuery和jqueryui相关的插件：

脚本类型=' text/JavaScript ' src=' http : js/Jquery-1 . 7 . 2 . min . js '/脚本脚本类型=' text/JavaScript ' src=' http : js/Jquery-ui-1 . 7 . 2 . custom . min . js '/脚本脚本脚本类型=' text/JavaScript ' src=' http : js/Jquery . flip . min . js '/脚本接下来，我们单击框

$(function(){ $('#prize li ')。每个(function(){ var p=$(this)；var c=$(这个)。attr(' class ')；p.css('背景色'，c)；p.click(function(){ $('#prize li '))。解除绑定(“点击”)；$.getJSON('data.php '，function(JSON){ var prize=JSON . yes；//获奖奖品p.flip({ direction:'rl '，//翻转方向rl:从右向左内容：奖品，//翻转后显示的内容为奖品颜色：c，//背景色onEnd: function(){ //翻转结束p.css ({'font-size' :' 22px '，'行高' 3: ' 100px ' })；p.attr('id '，' r ')；//标记id $('#viewother ')。显示获胜框的()；//显示视图其他按钮$ ('# prizeli ')。解除绑定(“单击”)。CSS('光标'，'默认')。remove attr(' title ')；} });$('#data ')。data('nolist '，JSON . no)；//保存不成功的信息})；});});});在代码中，我们首先遍历六个块，并为每个块初始化不同的背景颜色。单击当前块后，我们使用$。getJSON向后台data.php发送一个ajax请求。请求成功后，我们调用翻转插件来翻转块。翻转后，我们标记获胜区块id并冻结区块上的点击事件，即解除绑定(“点击”)。目的是让彩票只抽一次。最后，未被选中的奖项信息通过data()存储在#data中。其实现阶段，抽奖已经完成了。为了看到其他方块背面隐藏着什么，我们在抽奖结束后给出了一个看到其他方块背面的链接。点击此链接，其他五个方块会旋转，后面的奖励信息会显示出来。

$(function(){ $('#viewother '))。单击(function(){ var mydata=$('#data '))。数据(' nolist ')；//获取数据var mydata 2=eval(mydata)；//JSON可以转换为数组$ ('# prizeli ')。not($(“# r”)[0])。每个(函数(索引){ eval pr=$(this)；Pr.flip ({direction :' bt '，color : '浅灰色'，content : my data 2 [index]，//奖品信息(未选中)onend : function(){ pr . CSS({ ' font-size ' 3360 ' 22px ')。$('#viewother ')。hide()；} });});$('#data ')。remove DATa(' no list ')；});});当您点击#viewother时，您将获得抽奖过程中保存的奖品数据，将其转换为数组，翻转5个方块，并在相应的方块中显示奖品信息。最终效果图：

我想看完这篇文章，大家可能都知道电视节目中的翻牌抽奖比较棘手，可能不会再参与了。

总之，我希望你能从这篇边肖编译的文章中得到一些东西，这对你学习php编程有帮助。