首先要准备两张图片，即圆盘和指针，然后我们在#disk来放置圆盘背景图片，在css中控制，用#start来放置指针图片start.png。
CSS指针和圆盘样式如下：
#disk{width:417px;height:417px;background:url(images/disk.jpg)no-repeat}
#start{width:163px;height:320px;position:absolute;top:46px;left:130px;}
#startimg{cursor:pointer}
接着我们引入jquery.js、旋转插件jQueryRotate.2.2.js及动画easing插件jquery.easing.min.js。easing教程我们已经讲过了，jQueryEasing动画插件。
最后通过jQueryRotate.js旋转插件，我们让指针转起来。
$(function(){
$("#startbtn").rotate({
bind:{
click:function(){
varrandom=Math.floor(Math.random()*360);//生成随机数
$(this).rotate({
duration:3000,
//转动时间间隔(速度单位ms)
angle:0,
//指针开始角度
animateTo:3600+random,
//转动角度，当转动角度到达3600+random度时停止转动。
easing:$.easing.easeOutSine,
//easing动画效果
callback:function(){//回调函数
alert('恭喜您，中奖了！');
}
});
}
}
});
});
下面介绍使用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砸金蛋讲过，代码如下
functiongetRand($proArr){
$data='';
$proSum=array_sum($proArr);//概率数组的总概率精度
foreach($proArras$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_arras$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'];
echojson_encode($data);
接着点击”开始抽奖“按钮，便会向后台ajax.php请求并返回奖项信息，这时指针开始转动，指针最终停留位置是由ajax.php返回值angle来决定的，这样我们就可以控制概率和前端指针转动停留位置。代码如下：
$(function(){
$("#startbtn").click(function(){
lottery();
});
});
functionlottery(){
$.ajax({
type:'POST',
url:'ajax.php',
dataType:'json',
cache:false,
error:function(){
alert('Sorry，出错了！');
returnfalse;
},
success:function(json){
$("#startbtn").unbind('click').css("cursor","default");
varangle=json.angle;//指针角度
varprize=json.prize;//中奖奖项标题
$("#startbtn").rotate({
duration:3000,//转动时间ms
angle:0,//从0度开始
animateTo:3600+angle,//转动角度
easing:$.easing.easeOutSine,//easing扩展动画效果
callback:function(){
varresulte=confirm('恭喜您中得'+prize+'\n想要继续吗？');
if(resulte){//若是点击确定，继续抽奖
lottery();
}
}
});
}
});
}
