> php教程 > php手册 > PHP+jQuery+Ajax设置抽奖奖品和中奖概率

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

WBOY
풀어 주다: 2016-06-07 11:38:32
원래의
958명이 탐색했습니다.

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

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿