PHP翻转抽奖程序

今天看了一个不错的抽奖小程序,记录下

参考文章:http://blog.csdn.net/yaoyuan_difang/article/details/8442310 PHP概率算法(适用于抽奖、随机广告)

先来看概率算法

  1. function getRand($arr){  
  2.     $k = '';  
  3.     $sum = array_sum($arr);  
  4.     foreach ($arr as $key => $v) {  
  5.         $rnum = mt_rand(1,$sum);  
  6.         if($rnum < $v){  
  7.             $k = $key;  
  8.             break;  
  9.         }else{  
  10.             $sum -= $v;  
  11.         }  
  12.     }  
  13.     return $k;  
  14. }  
上述代码是一段经典的概率算法,$arr是一个预先设置的数组,假设数组为:array(100,200,300,400),开始是从1,1000这个概率范围内筛选第一个数是否在他的出现概率范围之内, 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间,在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的。这样筛选到最终,总会有一个数满足要求。就相当于去一个箱子里摸东西,第一个不是,第二个不是,第三个还不是,那最后一个一定是。这个算法简单,而且效率非常高,关键是这个算法已在我们以前的项目中有应用,尤其是大数据量的项目中效率非常棒。

每次前端页面的请求,PHP循环奖项设置数组,通过概率计算函数get_rand获取抽中的奖项id。将中奖奖品保存在数组$res['yes']中,而剩下的未中奖的信息保存在$res['no']中,最后输出json个数数据给前端页面。

  1. $prize_arr = array(  
  2.     "0" => array('id' => 1,'msg' => '平板电脑','v' => 3),  
  3.     "1" => array('id' => 2,'msg' => '数码相机','v' => 5),  
  4.     "2" => array('id' => 3,'msg' => '音箱设备','v' => 10),  
  5.     "3" => array('id' => 4,'msg' => '4G优盘','v' => 12),  
  6.     "4" => array('id' => 5,'msg' => '10Q币','v' => 20),  
  7.     "5" => array('id' => 6,'msg' => '很遗憾,这次没有中奖','v' => 50),  
  8.     );  
  9.   
  10. foreach($prize_arr as $v){  
  11.     $arr[$v['id']] = $v['v'];  
  12. }  
  13. $rid = getRand($arr);  
  14. //$res['flag'] = ($rid == 6) ? 0 : 1;  
  15. $res['yes'] = $prize_arr[$rid -1]['msg'];  
  16. unset($prize_arr[$rid-1]);  
  17. shuffle($prize_arr);  
  18. for($i=0; $i < count($prize_arr); $i++){  
  19.     $handlePr[] = $prize_arr[$i]['msg'];  
  20. }  
  21. $res['no'] = $handlePr;  
  22. echo json_encode($res);  
  23. exit;  

直接输出中奖信息就得了,为何还要把未中奖的信息也要输出给前端页面呢?请看后面的前端代码。

接下来,我们通过单击页面中的方块,来完成抽奖行为。

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
  2.     <script type="text/javascript">  
  3.         $(function(){  
  4.             $("#repeat").click(function(){  
  5.                 window.location.reload();  
  6.             });  
  7.   
  8.             $("#prize li").each(function(){  
  9.                 var p = $(this);  
  10.                 var c = $(this).attr('class');  
  11.                 p.css("background-color",c);  
  12.   
  13.                 p.click(function(){  
  14.                     $.getJSON('prize.php',function(data){  
  15.                         var prize = data.yes;  
  16.                         p.html(prize);  
  17.                         p.css({"background-color":'#fff','color':'#000','font-size':'20px'});  
  18.                         p.attr("id","win");  
  19.                         $("#viewother").show();  
  20.                         $("#repeat").show();  
  21.                         $("#prize li").unbind("click").css("cursor","default").removeAttr('title');  
  22.                         $("#data").data("nomsg",data.no);  
  23.                     });  
  24.                 });  
  25.             });  
  26.   
  27.         });  
  28.     </script>  

代码中先遍历6个方块,给每个方块初始化不同的背景颜色,单击当前方块后,使用$.getJSON向后台data.php发送ajax请求,请求成功后,调用flip插件实现翻转方块,在获取的中奖信息显示在翻转后的方块上,翻转结束后,标记该中奖方块id,同时冻结方块上的单击事件,即unbind('click'),目的就是让抽奖者只能抽一次,抽完后每个方块不能再翻动了。最后将未抽中的奖项信息通过data()储存在#data中。

其实到这一步抽奖工作已经完成,为了能查看其他方块背面究竟隐藏着什么,我们在抽奖后给出一个可以查看其他方块背面的链接。通过点击该链接,其他5个方块转动,将背面奖项信息显示出来。

  1. $("#viewother").click(function(){  
  2.                 var nomsg = $("#data").data("nomsg");  
  3.                 $("#prize li").not($("#win")[0]).each(function(index){  
  4.                     var p = $(this);  
  5.                     p.css("background-color",'#ccc');  
  6.                     p.html(nomsg[index]);  
  7.                     $("#viewother").hide();  
  8.                 });  
  9.             });  

最终完成后的现实结果如下:(程序源码在www下的lottery里面)


来源于 helloweba.com
相关文章
相关标签/搜索