后端index.PHP文件:
- /**
- *
- * php + ajax 幸运大转盘
- * @author Sim <326196998@qq.com>
- * @time 2014年9月25日15:37:32
- * @url http://www.yiifcms.com/post/59/
- *
- */
- //奖项初始化
- $prize_arr = array(
- '0' => array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等奖','v'=>1),
- '1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等奖','v'=>2),
- '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等奖','v'=>5),
- '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等奖','v'=>7),
- '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等奖','v'=>10),
- '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等奖','v'=>25),
- '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332),
- 'max'=>array(58,118,178,238,298,358),'prize'=>'七等奖','v'=>50)
- );
- //抽奖开始
- foreach ($prize_arr as $key => $val) {
- $arr[$val['id']] = $val['v'];
- }
- $rid = getRand($arr); //根据概率获取奖项id
- $res = $prize_arr[$rid-1]; //中奖项
- $min = $res['min'];
- $max = $res['max'];
- if($res['id']==7){ //七等奖
- $i = mt_rand(0,5);
- $result['angle'] = mt_rand($min[$i],$max[$i]);
- }else{
- $result['angle'] = mt_rand($min,$max); //随机生成一个角度
- }
- $result['prize'] = $res['prize'];
- echo json_encode($result);
- /**
- * 根据概率获取奖项
- * @param unknown $proArr
- * @return Ambigous <string, unknown>
- */
- function getRand($proArr) {
- $result = '';
- //概率数组的总概率精度
- $proSum = array_sum($proArr);
- //概率数组循环
- foreach ($proArr as $key => $proCur) {
- $randNum = mt_rand(1, $proSum);
- if ($randNum <= $proCur) {
- $result = $key;
- break;
- } else {
- $proSum -= $proCur;
- }
- }
- unset ($proArr);
- return $result;
- }
前端index.html文件:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>幸运大转盘 - PHP+AJAX实现</title>
- <style type="text/css">
- .demo { height: 417px; margin: 50px auto; position: relative; width: 417px;}
- #disk { background: url("disk.jpg") no-repeat; height: 417px; width: 417px;}
- #start { height: 320px; left: 130px; position: absolute; top: 46px; width: 163px;}
- </style>
- <script type="text/javascript" src="jquery-1.8.3.js"></script>
- <script type="text/javascript" src="jQueryRotate.2.2.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#startbtn").click(function(){
- lottery();
- });
- });
- function lottery(){
- $.ajax({
- type: 'POST',
- url: 'index.php',
- dataType: 'json',
- cache: false,
- error: function(){
- alert('出错了!');
- return false;
- },
- success:function(json){
- $("#startbtn").unbind('click').css("cursor","default");
- var a = json.angle; //角度
- var p = json.prize; //奖项
- $("#startbtn").rotate({
- duration:3000, //转动时间
- angle: 0,
- animateTo:1800+a, //转动角度
- easing: $.easing.easeOutSine,
- callback: function(){
- var con = confirm('恭喜你,中得'+p+'\n还要再来一次吗?');
- if(con){
- lottery();
- }else{
- //再次绑定click事件
- $("#startbtn").css("cursor","pointer").live("click",function(){
- lottery();
- });
- return false;
- }
- }
- });
- }
- });
- }
- </script>
- </head>
- <body>
- <div class="demo">
- <div id="disk"></div>
- <div id="start"><img id="startbtn" src="start.png" style="cursor: pointer; transform: rotate(0deg);"></div>
- </div>
- </body>
- </html>