抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。
1、转轮盘
本来是想直接绘图实现轮盘，但是没有找到怎么填充文字，只好把轮盘弄成了背景图，通常用于游戏抽道具，商城积分抽奖，公司年末员工抽奖
- 点击抽奖触发jquery的click事件；
- 通过ajax获取后台的随机数；
- 后台通过mt_rand得到随机奖项（角度），返回给前台；
- 通过jquery改变css transform、transition属性，旋转背景，也就是轮盘；
html代码
js代码
说明：
- 因为改变css进行旋转，开始的时候，直接执行了弹窗或者是console.log，这并不符合我们的要求，加入了setTimeout，在旋转完成以后，再给出提示；
- time**(5+result.angle/) 是总得旋转时间；
后台接口程序
public function choujiang(){
/*
id 奖品编号
title 中奖提示
prec 中奖概率
angle 旋转角度
*/
$arr[0]=array('id'=>1,'title'=>'恭喜抽中一等奖：苹果手机一部！','prec'=>1,'angle'=>);
$arr[1]=array('id'=>2,'title'=>'恭喜抽中二等奖：Ipad','prec'=>2,'angle'=>);
$arr[2]=array('id'=>3,'title'=>'恭喜抽中三等奖：','prec'=>,'angle'=>);
$arr[3]=array('id'=>4,'title'=>'恭喜抽中四等奖','prec'=>,'angle'=>);
$arr[4]=array('id'=>5,'title'=>'恭喜抽中五等奖','prec'=>,'angle'=>);
$arr[5]=array('id'=>6,'title'=>'恭喜抽中六等奖','prec'=>,'angle'=>);
$arr[6]=array('id'=>7,'title'=>'恭喜抽中七等奖','prec'=>,'angle'=>);
$arr[7]=array('id'=>8,'title'=>'获得元优惠券，还需加油哦！','prec'=>,'angle'=>);
//中奖几率求和
$cmun=0;
for($i=0;$i<=count($arr)-1;$i++){
$cmun+=$arr[$i]['prec'];
}
//中奖随机数
$smrand=mt_rand(1,$cmun);
$this->getRand(1,0,$arr,count($arr),$smrand);
}
public function getrand($m,$im,$arr,$count,$smrand){
/*
$m 起始数
$im 第几个数组元素
$count 数组总得元素个数
$arr 原始数组
$smrand 中奖随机数
*/
//已经中奖
if($smrand>=$m&&$smrand<=$arr[$im]['prec']+$m-1){
//中奖返回
$msg=array('msg'=>$arr[$im]['title'],'angle'=>$arr[$im]['angle'],'smrand'=>$smrand);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}else{
//最后一个不需要判断 直接返回
if($im+1==$count-1){
$msg=array('msg'=>$arr[$count-1]['title'],'angle'=>$arr[$count-1]['angle'],'smrand'=>$smrand);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}else{
//起始数字
$start=$arr[$im]['prec']+$m;
//递归 再次调用数组 读取下一个数组元素
$this->getrand($start,$im+1,$arr,$count,$smrand);
}
}
}说明：
- 以上概率算法采用的是所有概率求和做分母、出现的概率做分子，如果才有百分比，实现方式是一样的；
- 采用递归，依次判断每一次的起始数字和结束数字，中奖的随机数是否在该范围内，在，就是中得该奖项，否则没中，再判断下一个；
- 最后一个数组元素是不需要判断的，前边的都不是，最后一个一定就是中奖；
- 记录谁获得了什么奖项，应该是在后台返回数据之前，不能是前台弹窗以后通过ajax通知后台中奖信息；
2、随机抽取一个幸运员工
点击开始抽奖，单行文本框循环显示员工，抽奖按钮文字变为停止，点击停止的时候，抽中的员工显示在获奖名单。
html代码
获奖名单
js代码
说明：
num = Math.floor(Math.random() * (yuangong.length));
- yuangong.length员工数组长度；
- Math.random() 0到1的小数，包含0，不包含1；
- Math.floor 小数向下取整，可以为0；
综上：num得到的是0到数组下标的随机数。
clearInterval(t)：用于停止t = setTimeout(start, 0);
后台php接口程序
public function yuangong(){
$yuangong[0]=array('id'=>1,'title'=>'业务部【张三】');
$yuangong[1]=array('id'=>2,'title'=>'技术部【李四】');
$yuangong[2]=array('id'=>3,'title'=>'技术部【逍遥】');
$yuangong[3]=array('id'=>4,'title'=>'会计部【薛嫣】');
$yuangong[4]=array('id'=>5,'title'=>'行政部【王五】');
$yuangong[5]=array('id'=>6,'title'=>'行政部【王天林】');
$yuangong[6]=array('id'=>7,'title'=>'行政部【李笑和】');
$msg=array('msg'=>$yuangong);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}3、随机抽取多个幸运员工
没有想到什么效果，只是单纯地获取了随机数
html代码
获奖名单
js代码
4、在线开盲盒
需要我们点击抽奖的时候通过ajax读取后台获得的盲盒信息，直接显示到前台，前台显示同上边的，都是一样，说一下后台程序。
使用array_rand().随机获取几个数组元素
array_rand($arr,$count).用法
- $arr目标数组；
- $count随机的个数;
返回值是原数组的下标。
public function manghe(){
$goods[0]=array('id'=>1,'title'=>'手机');
$goods[1]=array('id'=>2,'title'=>'毛绒玩具');
$goods[2]=array('id'=>3,'title'=>'化妆品');
$goods[3]=array('id'=>4,'title'=>'啫喱水');
$goods[4]=array('id'=>5,'title'=>'面膜');
$goods[5]=array('id'=>6,'title'=>'学习用品');
$goods[6]=array('id'=>7,'title'=>'电脑');
$getarr=array_rand($goods,3);
$i=0;
foreach($getarr as $k){
$rearr[$i]=$goods[$k];
$i++;
}
$msg=array('msg'=>$rearr);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}如果包含特殊奖项，需要满足抽奖多少次，一定抽中，可以达到抽奖次数以后在array_rand内随机数减一，然后把大奖塞进该次抽奖的返回信息。
array_push($rearr,$a)用法：
- $rearr目标数组；
- $a追加的元素或者是数组
$tebie[]=array('id'=>,'title'=>'特别大奖');
$goods[0]=array('id'=>1,'title'=>'手机');
$goods[1]=array('id'=>2,'title'=>'毛绒玩具');
$goods[2]=array('id'=>3,'title'=>'化妆品');
$goods[3]=array('id'=>4,'title'=>'啫喱水');
$goods[4]=array('id'=>5,'title'=>'面膜');
$goods[5]=array('id'=>6,'title'=>'学习用品');
$goods[6]=array('id'=>7,'title'=>'电脑');
$getarr=array_rand($goods,3);
$i=0;
foreach($getarr as $k){
$rearr[$i]=$goods[$k];
$i++;
}
array_push($rearr,$tebie[]);
dump($rearr);
exit;输出结果：
array(4) {
[0] => array(2) {
["id"] => int(2)
["title"] => string() "毛绒玩具"
}
[1] => array(2) {
["id"] => int(3)
["title"] => string(9) "化妆品"
}
[2] => array(2) {
["id"] => int(6)
["title"] => string() "学习用品"
}
[3] => array(2) {
["id"] => int)
["title"] => string() "特别大奖"
}
}