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{width:417px; height:417px; background:url(images/disk.jpg) no-repeat}  
6.  #start{width: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.js。easing 教程我們已經講過了，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 + '\n想要繼續嗎？'); 
116.                     if (resulte) { //若是點擊確定，繼續抽獎 
117.                         lottery(); 
118.                     } 
119.                 } 
120.             }); 
121.         } 
122.     }); 
123.  }

復制代碼

查看該特效演示及免費下載，請訪問http://www.sucaihuo.com/js/19.html