空翻画怎么做？
查看演示
翻牌彩票的实现过程:首页提供六个方块，用数字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事件在点击事件后插入代码:
$(“#奖李”)。取消绑定(“单击”)；