上一篇讲解了幸运大转盘前端，而本文继续讲下半部分：PHP控制抽奖几率并最终实现转盘抽奖。
下载资源
下载积分：
95
积分
PHP
首先，在ajax.php中创建一个奖项对应角度和中奖几率二维数组： $prize_arr = array(
'0' => array('id' => 1, 'min' => 1, 'max' => 29, 'prize' => '一等奖', 'v' => 1),
'1' => array('id' => 2, 'min' => 302, 'max' => 328, 'prize' => '二等奖', 'v' => 2),
'2' => array('id' => 3, 'min' => 242, 'max' => 268, 'prize' => '三等奖', 'v' => 5),
'3' => array('id' => 4, 'min' => 182, 'max' => 208, 'prize' => '四等奖', 'v' => 7),
'4' => array('id' => 5, 'min' => 122, 'max' => 148, 'prize' => '五等奖', 'v' => 10),
'5' => array('id' => 6, 'min' => 62, 'max' => 88, 'prize' => '六等奖', 'v' => 25),
'6' => array('id' => 7, 'min' => array(32, 92, 152, 212, 272, 332),
'max' => array(58, 118, 178, 238, 298, 358), 'prize' => '七等奖', 'v' => 50)
//min数组表示每个个奖项对应的最小角度 max表示最大角度
//prize表示奖项内容，v表示中奖几率(若数组中七个奖项的v的总和为100，如果v的值为1，则代表中奖几率为1%，依此类推)
);
中奖概率方法我们之前在jQuery砸金蛋_PHP砸金蛋讲过，代码如下 function getRand($proArr) {
$data = '';
$proSum = array_sum($proArr); //概率数组的总概率精度
foreach ($proArr as $k => $v) { //概率数组循环
$randNum = mt_rand(1, $proSum);
if ($randNum <= $v) {
$data = $k;
break;
} else {
$proSum -= $v;
}
}
unset($proArr);
return $data;
}
函数getRand()会根据数组中设置的几率计算出符合条件的id，我们可以接着调用getRand()。 foreach ($prize_arr as $v) {
$arr[$v['id']] = $v['v'];
}
$prize_id = getRand($arr); //根据概率获取奖项id
$res = $prize_arr[$prize_id - 1]; //中奖项
$min = $res['min'];
$max = $res['max'];
if ($res['id'] == 7) { //七等奖
$i = mt_rand(0, 5);
$data['angle'] = mt_rand($min[$i], $max[$i]);
} else {
$data['angle'] = mt_rand($min, $max); //随机生成一个角度
}
$data['prize'] = $res['prize'];
echo json_encode($data);
jQuery
接着点击”开始抽奖“按钮，便会向后台ajax.php请求并返回奖项信息，这时指针开始转动，指针最终停留位置是由ajax.php返回值angle 来决定的，这样我们就可以控制概率和前端指针转动停留位置。代码如下： $(function() {
$("#startbtn").click(function() {
lottery();
});
});
function lottery() {
$.ajax({
type: 'POST',
url: 'ajax.php',
dataType: 'json',
cache: false,
error: function() {
alert('Sorry，出错了！');
return false;
},
success: function(json) {
$("#startbtn").unbind('click').css("cursor", "default");
var angle = json.angle; //指针角度
var prize = json.prize; //中奖奖项标题
$("#startbtn").rotate({
duration: 3000,//转动时间 ms
angle: 0, //从0度开始
animateTo: 3600 + angle,//转动角度
easing: $.easing.easeOutSine, //easing扩展动画效果
callback: function() {
var resulte = confirm('恭喜您中得' + prize + '\n想要继续吗？');
if (resulte) { //若是点击确定，继续抽奖
lottery();
}
}
});
}
});
}
若您对转盘前端转动效果不明白，建议您先阅读幸运大转盘jQuery幸运大转盘_jQuery+PHP抽奖程序(上)，动画效果easing可参考jquery.easing动画插件
