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="data: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. 下面介绍使用PHP来控制抽奖几率，以及完成两者之间的交互：
36. 首先，在ajax.php中创建一个奖项对应角度和中奖几率二维数组：
37. $prize_arr = array(
38. '0' => array('id' => 1, 'min' => 1, 'max' => 29, 'prize' => '一等奖', 'v' => 1),
39. '1' => array('id' => 2, 'min' => 302, 'max' => 328, 'prize' => '二等奖', 'v' => 2),
40. '2' => array('id' => 3, 'min' => 242, 'max' => 268, 'prize' => '三等奖', 'v' => 5),
41. '3' => array('id' => 4, 'min' => 182, 'max' => 208, 'prize' => '四等奖', 'v' => 7),
42. '4' => array('id' => 5, 'min' => 122, 'max' => 148, 'prize' => '五等奖', 'v' => 10),
43. '5' => array('id' => 6, 'min' => 62, 'max' => 88, 'prize' => '六等奖', 'v' => 25),
44. '6' => array('id' => 7, 'min' => array(32, 92, 152, 212, 272, 332),
45. 'max' => array(58, 118, 178, 238, 298, 358), 'prize' => '七等奖', 'v' => 50)
46. //min数组表示每个个奖项对应的最小角度 max表示最大角度
47. //prize表示奖项内容，v表示中奖几率(若数组中七个奖项的v的总和为100，如果v的值为1，则代表中奖几率为1%，依此类推)
48. );
49. 中奖概率方法我们之前在jQuery砸金蛋_PHP砸金蛋讲过，代码如下
50. function getRand($proArr) {
51. $data = '';
52. $proSum = array_sum($proArr); //概率数组的总概率精度
53. foreach ($proArr as $k => $v) { //概率数组循环
54. $randNum = mt_rand(1, $proSum);
55. if ($randNum <= $v) {
56. $data = $k;
57. break;
58. } else {
59. $proSum -= $v;
60. }
61. }
62. unset($proArr);
63. return $data;
64. }
65. 函数getRand()会根据数组中设置的几率计算出符合条件的id，我们可以接着调用getRand()。
66. foreach ($prize_arr as $v) {
67. $arr[$v['id']] = $v['v'];
68. }
69. $prize_id = getRand($arr); //根据概率获取奖项id
70. $res = $prize_arr[$prize_id - 1]; //中奖项
71. $min = $res['min'];
72. $max = $res['max'];
73. if ($res['id'] == 7) { //七等奖
74. $i = mt_rand(0, 5);
75. $data['angle'] = mt_rand($min[$i], $max[$i]);
76. } else {
77. $data['angle'] = mt_rand($min, $max); //随机生成一个角度
78. }
79. $data['prize'] = $res['prize'];
80. echo json_encode($data);
81. 接着点击”开始抽奖“按钮，便会向后台ajax.php请求并返回奖项信息，这时指针开始转动，指针最终停留位置是由ajax.php返回值angle 来决定的，这样我们就可以控制概率和前端指针转动停留位置。代码如下：
82. $(function() {
83. $("#startbtn").click(function() {
84. lottery();
85. });
86. });
87. function lottery() {
88. $.ajax({
89. type: 'POST',
90. url: 'ajax.php',
91. dataType: 'json',
92. cache: false,
93. error: function() {
94. alert('Sorry，出错了！');
95. return false;
96. },
97. success: function(json) {
98. $("#startbtn").unbind('click').css("cursor", "default");
99. var angle = json.angle; //指针角度
100. var prize = json.prize; //中奖奖项标题
101. $("#startbtn").rotate({
102. duration: 3000,//转动时间 ms
103. angle: 0, //从0度开始
104. animateTo: 3600 + angle,//转动角度
105. easing: $.easing.easeOutSine, //easing扩展动画效果
106. callback: function() {
107. var resulte = confirm('恭喜您中得' + prize + '\n想要继续吗？');
108. if (resulte) { //若是点击确定，继续抽奖
109. lottery();
110. }
111. }
112. });
113. }
114. });
115. }

复制代码

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