PHP+jQuery+Ajax设置抽奖奖品和中奖概率

分享一款jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖品数量、转动次数、中奖位置参数，并且后台ajax.php可设置奖品和中奖概率。

首先我们在#lottery放置12个奖品，代码如下：

1. <div id="lottery"> 

2.     <table border="0" cellpadding="0" cellspacing="0"> 

3.         <tr> 

4.             <td class="lottery-unit lottery-unit-0"><img src="images/1.png"></td> 

5.             <td class="lottery-unit lottery-unit-1"><img src="images/2.png"></td> 

6.             <td class="lottery-unit lottery-unit-2"><img src="images/4.png"></td> 

7.             <td class="lottery-unit lottery-unit-3"><img src="images/3.png"></td> 

8.         </tr> 

9.         <tr> 

10.             <td class="lottery-unit lottery-unit-11"><img src="images/7.png"></td> 

11.             <td colspan="2" rowspan="2"><a href="#"></a></td> 

12.             <td class="lottery-unit lottery-unit-4"><img src="images/5.png"></td> 

13.         </tr> 

14.         <tr> 

15.             <td class="lottery-unit lottery-unit-10"><img src="images/1.png"></td> 

16.             <td class="lottery-unit lottery-unit-5"><img src="images/6.png"></td> 

17.         </tr> 

18.         <tr> 

19.             <td class="lottery-unit lottery-unit-9"><img src="images/3.png"></td> 

20.             <td class="lottery-unit lottery-unit-8"><img src="images/6.png"></td> 

21.             <td class="lottery-unit lottery-unit-7"><img src="images/8.png"></td> 

22.             <td class="lottery-unit lottery-unit-6"><img src="images/7.png"></td> 

23.         </tr> 

24.     </table> 

25.  </div>

复制代码

点击“开始抽奖”按钮，并且远程ajax.php获取奖项：

1. $(function() { 

2.     lottery.init('lottery'); 

3.     $("#lottery a").click(function() { 

4.         if (click) { 

5.             return false; 

6.         } else { 

7.             lottery.speed = 100; 

8.             $.post("ajax.php", { 

9.                 uid: 1 

10.             }, 

11.             function(data) { //获取奖品，也可以在这里判断是否登陆状态 

12.                 $("#lottery").attr("prize_site", data.prize_site); 

13.                 $("#lottery").attr("prize_id", data.prize_id); 

14.                 $("#lottery").attr("prize_name", data.prize_name); 

15.                 roll(); 

16.                 click = true; 

17.                 return false; 

18.             }, 

19.             "json") 

20.         } 

21.     }); 

22.  })

复制代码

Ajax.php
12个奖品数组如下，其中prize表示奖项内容，v表示中奖几率(若数组中七个奖项的v的总和为100，如果v的值为1，则代表中奖几率为1%，依此类推)

1. $prize_arr = array( 

2.     '0' => array('id' => 1, 'prize' => '一等奖', 'v' => 5), 

3.     '1' => array('id' => 2, 'prize' => '二等奖', 'v' => 5), 

4.     '2' => array('id' => 3, 'prize' => '三等奖', 'v' => 5), 

5.     '3' => array('id' => 4, 'prize' => '四等奖', 'v' => 5), 

6.     '4' => array('id' => 5, 'prize' => '五等奖', 'v' => 5), 

7.     '5' => array('id' => 6, 'prize' => '六等奖', 'v' => 5), 

8.     '6' => array('id' => 7, 'prize' => '七等奖', 'v' => 5), 

9.     '7' => array('id' => 8, 'prize' => '八等奖', 'v' => 5), 

10.     '8' => array('id' => 9, 'prize' => '九等奖', 'v' => 5), 

11.     '9' => array('id' => 10, 'prize' => '十等奖', 'v' => 5), 

12.     '10' => array('id' => 11, 'prize' => '十一等奖', 'v' => 25), 

13.     '11' => array('id' => 12, 'prize' => '十二等奖', 'v' => 25), 

14.  );

复制代码

获取随机奖品：

1. foreach ($prize_arr as $k=>$v) { 

2.     $arr[$v['id']] = $v['v']; 

3.  

4.  } 

5.  

6. $prize_id = getRand($arr); //根据概率获取奖项id  

7.  foreach($prize_arr as $k=>$v){ //获取前端奖项位置 

8.     if($v['id'] == $prize_id){ 

9.      $prize_site = $k; 

10.      break; 

11.     } 

12.  } 

13. $res = $prize_arr[$prize_id - 1]; //中奖项  

14.  

15. $data['prize_name'] = $res['prize']; 

16. $data['prize_site'] = $prize_site;//前端奖项从-1开始 

17. echo json_encode($data);

复制代码