jquery+h5实现九宫格抽奖特效（前后端代码）

前言：

前端：jq+h5 实现九宫格动效

后端：thinkphp3.2.3 实现中奖概率算法

功能：支持读取数据库预设的中奖率及奖品池，中奖率可以自定义，必须是整数

最终效果如下：

代码：

choujiang.html代码如下：

 

     

         

             
安慰奖
             
玩具车
             
自行车
         
         

             
奥迪
             
开始抽奖
             
电动车
         
         

             
夏利
             
拖拉机
             
摩托
         
     
 
 
恭喜您获得奖品：领取奖品

thinkphp接口代码如下：

namespace Api\Controller;
use Think\Controller;
class ShopController Extends Controller{
 /**
     * 抽奖后台接口
     * @author 武当山道士
     */
    
     public function ex(){
        $nick = I('nick','','trim');
        $avatar = I('avatar','','trim');
        $openid = I('openid','','trim');
        //if(empty($nick)) $this->error('empty nick');
        //if(empty($avatar)) $this->error('empty avatar');
        //if(empty($openid)) $this->error('empty openid');
        /*自己封装的error函数，正常应该这样写：
        $this->ajaxReturn(array(
          'data'=>'',
          'info'=>$info,
          'status'=>$status
         ));*/
         
        //初始化奖品池，8个奖品，满概率100，最小概率为1(id,name以实际数据库取出的数据为准，percent之和等于100)
        $arr8 = array(
            array("id"=>1,"name"=>"安慰奖","percent"=>69),
            array("id"=>2,"name"=>"玩具车","percent"=>10),
            array("id"=>3,"name"=>"自行车","percent"=>6),
            array("id"=>4,"name"=>"电动车","percent"=>5),
            array("id"=>5,"name"=>"摩托","percent"=>4),
            array("id"=>6,"name"=>"拖拉机","percent"=>3),
            array("id"=>7,"name"=>"夏利","percent"=>2),
            array("id"=>8,"name"=>"奥迪","percent"=>1),
            );
        //下标存储数组100个下表，0-7 按概率分配对应的数量
        $indexArr = array();
        for($i=0;$isuccess($data);/*自己封装的success，正常应该这样写 
        $this->ajaxReturn(array(
          'data'=>$data,
          'info'=>'成功',
          'status'=>1
         ));*/
    }
    
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。