PHP+jQuery+Ajax设置抽奖奖品和中奖概率-php手册-PHP中文网

首页

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 11:38 AM

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

首先我们在#lottery放置12个奖品，代码如下：<div> <table> <tr> <td><img src="/static/imghwm/default1.png" data-src="images/1.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghwm/default1.png" data-src="images/2.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghwm/default1.png" data-src="images/4.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghwm/default1.png" data-src="images/3.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> </tr> <tr> <td><img src="/static/imghwm/default1.png" data-src="images/7.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><a></a></td> <td><img src="/static/imghwm/default1.png" data-src="images/5.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> </tr> <tr> <td><img src="/static/imghwm/default1.png" data-src="images/1.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghwm/default1.png" data-src="images/6.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> </tr> <tr> <td><img src="/static/imghwm/default1.png" data-src="images/3.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghwm/default1.png" data-src="images/6.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghwm/default1.png" data-src="images/8.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghwm/default1.png" data-src="images/7.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> </tr> </table> </div>点击“开始抽奖”按钮，并且远程ajax.php获取奖项：$(function() { lottery.init('lottery'); $("#lottery a").click(function() { if (click) { return false; } else { lottery.speed = 100; $.post("ajax.php", { uid: 1 }, function(data) { //获取奖品，也可以在这里判断是否登陆状态 $("#lottery").attr("prize_site", data.prize_site); $("#lottery").attr("prize_id", data.prize_id); $("#lottery").attr("prize_name", data.prize_name); roll(); click = true; return false; }, "json") } }); })Ajax.php
12个奖品数组如下，其中prize表示奖项内容，v表示中奖几率(若数组中七个奖项的v的总和为100，如果v的值为1，则代表中奖几率为1%，依此类推)$prize_arr = array( '0' => array('id' => 1, 'prize' => '一等奖', 'v' => 5), '1' => array('id' => 2, 'prize' => '二等奖', 'v' => 5), '2' => array('id' => 3, 'prize' => '三等奖', 'v' => 5), '3' => array('id' => 4, 'prize' => '四等奖', 'v' => 5), '4' => array('id' => 5, 'prize' => '五等奖', 'v' => 5), '5' => array('id' => 6, 'prize' => '六等奖', 'v' => 5), '6' => array('id' => 7, 'prize' => '七等奖', 'v' => 5), '7' => array('id' => 8, 'prize' => '八等奖', 'v' => 5), '8' => array('id' => 9, 'prize' => '九等奖', 'v' => 5), '9' => array('id' => 10, 'prize' => '十等奖', 'v' => 5), '10' => array('id' => 11, 'prize' => '十一等奖', 'v' => 25), '11' => array('id' => 12, 'prize' => '十二等奖', 'v' => 25), );获取随机奖品：foreach ($prize_arr as $k=>$v) { $arr[$v['id']] = $v['v']; } $prize_id = getRand($arr); //根据概率获取奖项id foreach($prize_arr as $k=>$v){ //获取前端奖项位置 if($v['id'] == $prize_id){ $prize_site = $k; break; } } $res = $prize_arr[$prize_id - 1]; //中奖项 $data['prize_name'] = $res['prize']; $data['prize_site'] = $prize_site;//前端奖项从-1开始 echo json_encode($data);PHP抽奖演示：http://www.sucaihuo.com/php/129.html