原理
先看图
可以看到1-6等奖都只有1个 ，7等奖有6个。指针默认指向上图位置，记为0°。
每个奖项对应不同的角度，圆的角度为360°，分成12块，所以每块为30°。
为了防止指针指着相邻两个将向之间的线，所以记为一等奖的最小角度为1°，最大角度为29°。同理可找出其他奖项的角度，这要注意，七等奖有6个。
然后呢，每个奖项都有不同的中奖概率，我们根据概率来获取奖项（概率可以设置为0，你懂的～），获取奖品后，在根据最大和最小角度生成一个随机数，来让指针旋转即可..
HTML代码
代码是基于thinkphp的，如果你的不是，修改里面的url路径就行了
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="keywords" content="幸运大转盘，cnsecer.com" />
- <meta name="description" content="幸运大转盘" />
- <title>幸运大转盘</title>
- <style type="text/css">
- .demo{width:417px; height:417px; position:relative; margin:50px auto}
- #disk{width:417px; height:417px; background:url(__STATIC__/images/disk.jpg) no-repeat}
- #start{width:163px; height:320px; position:absolute; top:46px; left:130px;}
- #start img{cursor:pointer}
- </style>
- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
- <script type="text/javascript" src="__STATIC__/js/jQueryRotate.2.2.js"></script>
- <script type="text/javascript" src="__STATIC__/js/jquery.easing.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#startbtn").click(function(){
- lottery();
- });
- });
- function lottery(){
- $.ajax({
- type: 'POST',
- url: '{:U(\'game/run\')}', //提交地址 改为你自己的
- 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{
- return false;
- }
- }
- });
- }
- });
- }
- </script>
- </head>
- <body>
- <div id="main">
- <div class="msg"></div>
- <div class="demo">
- <div id="disk"></div>
- <div id="start"><img src="__STATIC__/images/start.png" id="startbtn"></div>
- </div>
- </div>
- <div id="footer">
- </div>
- </body>
- </html>
后台处理代码
- <?php
- namespace Home\Controller;
- use Think\Controller;
- class GameController extends BaseController{
- public function index(){
- $this->display("index");
- }
- public function run(){
- $proArr = array();
- //v 是中奖概率 相加之后最好为100的整数倍 id为奖品编号 min max 分别为最大和最小角度
- $prize_arr = array(
- '0' => array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等奖','v'=>0),
- '1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等奖','v'=>0),
- '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等奖','v'=>0),
- '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等奖','v'=>0),
- '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等奖','v'=>0),
- '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等奖','v'=>0),
- '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332), 'max'=>array(58,118,178,238,298,358),'prize'=>'七等奖','v'=>100)
- );
- //获取随机奖品
- foreach ($prize_arr as $v) {
- $proArr[$v['id']] = $v['v'];
- }
- $rid = $this->getRand($proArr); //根据概率获取奖项id
- $res = $prize_arr[$rid-1]; //中奖项
- // dd($res);die;
- $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);
- }
- protected 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;
- }
- }
