原理
先看圖
可以看到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;
- }
- }