• jQuery幸运大转盘_jQuery+PHP抽奖程序


    http://www.thinkphp.cn/code/1153.html

    网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序。


    若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。

    1. 首先要准备两张图片,即圆盘和指针,然后我们在#disk来放置圆盘背景图片,在css中控制,用#start来放置指针图片start.png。
    2.  <div id="disk"></div> 
    3.  <div id="start"><img src="images/start.png" id="startbtn" alt="转盘开启"/></div>
    4. CSS指针和圆盘样式如下:
    5.  #disk{417px; height:417px; background:url(images/disk.jpg) no-repeat}  
    6.  #start{163px; height:320px; position:absolute; top:46px; left:130px;}  
    7.  #start img{cursor:pointer}
    8.  接着我们引入jquery.js、旋转插件jQueryRotate.2.2.js及动画easing插件jquery.easing.min.jseasing 教程我们已经讲过了,jQuery Easing动画插件。
    9.  <script type = "text/javascript" src = "jquery.js" > </script> 
    10. <script type = "text/javascript" src = "jQueryRotate.2.2.js"></script> 
    11. <script type = "text/javascript" src = "jquery.easing.min.js"></script>
    12. 最后通过jQueryRotate.js旋转插件,我们让指针转起来。
    13. $(function() { 
    14.     $("#startbtn").rotate({ 
    15.         bind: { 
    16.             click: function() { 
    17.                 var random = Math.floor(Math.random() * 360); //生成随机数  
    18.                 $(this).rotate({ 
    19.                     duration: 3000, 
    20.                     //转动时间间隔(速度单位ms)  
    21.                     angle: 0, 
    22.                     //指针开始角度  
    23.                     animateTo: 3600 + random, 
    24.                     //转动角度,当转动角度到达3600+random度时停止转动。 
    25.                     easing: $.easing.easeOutSine, 
    26.                     //easing动画效果 
    27.                     callback: function() { //回调函数  
    28.                         alert('恭喜您,中奖了!'); 
    29.                     } 
    30.                 }); 
    31.             } 
    32.         } 
    33.     }); 
    34.  });
    35.  
    36.  下面介绍使用PHP来控制抽奖几率,以及完成两者之间的交互:
    37.  
    38.  首先,在ajax.php中创建一个奖项对应角度和中奖几率二维数组:
    39. $prize_arr = array( 
    40.     '0' => array('id' => 1, 'min' => 1, 'max' => 29, 'prize' => '一等奖', 'v' => 1), 
    41.     '1' => array('id' => 2, 'min' => 302, 'max' => 328, 'prize' => '二等奖', 'v' => 2), 
    42.     '2' => array('id' => 3, 'min' => 242, 'max' => 268, 'prize' => '三等奖', 'v' => 5), 
    43.     '3' => array('id' => 4, 'min' => 182, 'max' => 208, 'prize' => '四等奖', 'v' => 7), 
    44.     '4' => array('id' => 5, 'min' => 122, 'max' => 148, 'prize' => '五等奖', 'v' => 10), 
    45.     '5' => array('id' => 6, 'min' => 62, 'max' => 88, 'prize' => '六等奖', 'v' => 25), 
    46.     '6' => array('id' => 7, 'min' => array(32, 92, 152, 212, 272, 332), 
    47.         'max' => array(58, 118, 178, 238, 298, 358), 'prize' => '七等奖', 'v' => 50) 
    48.     //min数组表示每个个奖项对应的最小角度 max表示最大角度 
    49.     //prize表示奖项内容,v表示中奖几率(若数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推) 
    50.  );
    51.  中奖概率方法我们之前在jQuery砸金蛋_PHP砸金蛋讲过,代码如下
    52.  function getRand($proArr) { 
    53.     $data = ''; 
    54.     $proSum = array_sum($proArr); //概率数组的总概率精度  
    55.  
    56.     foreach ($proArr as $k => $v) { //概率数组循环 
    57.         $randNum = mt_rand(1, $proSum); 
    58.         if ($randNum <= $v) { 
    59.             $data = $k; 
    60.             break; 
    61.         } else { 
    62.             $proSum -= $v; 
    63.         } 
    64.     } 
    65.     unset($proArr); 
    66.  
    67.     return $data; 
    68.  }
    69.  函数getRand()会根据数组中设置的几率计算出符合条件的id,我们可以接着调用getRand()。
    70.  foreach ($prize_arr as $v) { 
    71.     $arr[$v['id']] = $v['v']; 
    72.  } 
    73.  
    74. $prize_id = getRand($arr); //根据概率获取奖项id  
    75.  
    76. $res = $prize_arr[$prize_id - 1]; //中奖项  
    77. $min = $res['min']; 
    78. $max = $res['max']; 
    79.  if ($res['id'] == 7) { //七等奖  
    80.     $i = mt_rand(0, 5); 
    81.     $data['angle'] = mt_rand($min[$i], $max[$i]); 
    82.  } else { 
    83.     $data['angle'] = mt_rand($min, $max); //随机生成一个角度  
    84.  } 
    85. $data['prize'] = $res['prize']; 
    86.  
    87. echo json_encode($data);
    88.  
    89.  接着点击”开始抽奖“按钮,便会向后台ajax.php请求并返回奖项信息,这时指针开始转动,指针最终停留位置是由ajax.php返回值angle 来决定的,这样我们就可以控制概率和前端指针转动停留位置。代码如下:
    90. $(function() { 
    91.     $("#startbtn").click(function() { 
    92.         lottery(); 
    93.     }); 
    94.  }); 
    95.  function lottery() { 
    96.     $.ajax({ 
    97.         type: 'POST', 
    98.         url: 'ajax.php', 
    99.         dataType: 'json', 
    100.         cache: false, 
    101.         error: function() { 
    102.             alert('Sorry,出错了!'); 
    103.             return false; 
    104.         }, 
    105.         success: function(json) { 
    106.             $("#startbtn").unbind('click').css("cursor", "default"); 
    107.             var angle = json.angle; //指针角度  
    108.             var prize = json.prize; //中奖奖项标题  
    109.             $("#startbtn").rotate({ 
    110.                 duration: 3000,//转动时间 ms 
    111.                 angle: 0, //从0度开始 
    112.                 animateTo: 3600 + angle,//转动角度  
    113.                 easing: $.easing.easeOutSine, //easing扩展动画效果 
    114.                 callback: function() { 
    115.                     var resulte = confirm('恭喜您中得' + prize + ' 想要继续吗?'); 
    116.                     if (resulte) { //若是点击确定,继续抽奖 
    117.                         lottery(); 
    118.                     } 
    119.                 } 
    120.             }); 
    121.         } 
    122.     }); 
    123.  }
    复制代码

    查看该特效演示及免费下载,请访问http://www.sucaihuo.com/js/19.html

  • 相关阅读:
    scapy--初识
    python--re(匹配字符串)
    python--pdb
    Fedora 配置
    Ubuntu 18.04 配置
    python--git
    python--os
    day28 Pyhton 面向对象 继承
    day28 Pyhton MRO和C3算法
    数学知识回顾02
  • 原文地址:https://www.cnblogs.com/qq350760546/p/5412760.html
Copyright © 2020-2023  润新知