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

Heim

php教程

php手册

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

Jun 07, 2016 am 11:38 AM

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

首先我们在#lottery放置12个奖品，代码如下：<div> <table> <tr> <td><img src="/static/imghw/default1.png" data-src="images/1.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghw/default1.png" data-src="images/2.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghw/default1.png" data-src="images/4.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghw/default1.png" data-src="images/3.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> </tr> <tr> <td><img src="/static/imghw/default1.png" data-src="images/7.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><a></a></td> <td><img src="/static/imghw/default1.png" data-src="images/5.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> </tr> <tr> <td><img src="/static/imghw/default1.png" data-src="images/1.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghw/default1.png" data-src="images/6.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> </tr> <tr> <td><img src="/static/imghw/default1.png" data-src="images/3.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghw/default1.png" data-src="images/6.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghw/default1.png" data-src="images/8.png" class="lazy" alt="PHP+jQuery+Ajax设置抽奖奖品和中奖概率" ></td> <td><img src="/static/imghw/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

PHP+jQuery+Ajax九宫格抽奖转盘.zip ( 640.71 KB 下载：324 次 )

AD：真正免费，域名+虚机+企业邮箱=0元

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn