h5幸运大转盘抽奖活动HTML模板

以下是前端js代码:

$(function () {
    // var tips = ["500M流量", "1G流量", "50元话费", "20元话费", "300M流量","谢谢参与~"],//中奖提示
    var $ring = $(".ring"),
        $prize = $(".prize"),//转盘
        $btn = $("#btn"),//按钮
        $change = $("#change"),//显示剩余抽奖机会
        $li = $(".scroll li"),//中奖信息滚动的盒子
        $sNum = $(".start-num"),//手机头号,三位数
        $eNum = $(".end-num"),//手机尾号,四位数
        $info = $(".info"),//中奖提示信息
        data = {count: 10},//次数
        bool = false,//判断是否在旋转,true表示是,false表示否
        timer;//定时器

    init();
    function init() {
        timer = setInterval(function () {
            $ring.toggleClass("light");
        }, 1000);
    }

    //点击抽奖
    $btn.click(function () {
        if (bool) return; // 如果在执行就退出
        bool = true; // 标志为 在执行
        // if (data.count <= 0) { //当抽奖次数为0时
        //     $change.html(0);//次数显示为0
        //     bool = false;
        //     alert("没有次数了");
        // } else { //还有次数就执行
        //     data.count--;
        //     data.count <= 0 && (data.count = 0);
        //     $change.html(data.count);//显示剩余次数
        //     $prize.removeClass("running");
        //     //clickFn();
        //     ajax_lottery()
        // }

        $prize.removeClass("running");
        //clickFn();
        ajax_lottery()
    });

    function ajax_lottery() {
        var uid = queryString('uid');
        var token = queryString('token');
        $.ajax({
            url: '/home/lottery/ajax_lottery',
            type: 'POST',
            dataType: 'json',
            data: {uid: uid,token:token},
            success:function(res)
            {
                if(res.code==0)
                {
                    rotateFn(res.data.angle, res.data.prize)
                    //clickFn();
                }
                else
                {
                    $('#change').text(res.msg)
                    $('.error_text').text(res.msg)
                    $("#mask2").show();

                    $(".winning").addClass("reback");
                    setTimeout(function () {
                        $("#card").addClass("pull");
                    }, 500);

                    //关闭弹出层
                    $("#close,.win,.btn").click(function () {
                        //$close.click(function () {
                        $("#mask").hide();
                        $("#mask2").hide();
                        $(".winning").removeClass("reback");
                        $("#card").removeClass("pull");
                    });
                    bool = false;
                }
            }
        });

    }
    //随机概率
    function clickFn() {
        var data = [1, 2, 3, 4, 5, 6];//抽奖概率
        //data为随机出来的结果,根据概率后的结果
        data = data[Math.floor(Math.random() * data.length)];//1-6的随机数
        switch (data) {//中奖概率,可控。根据得到的随机数控制奖品
            case 1:
           
                rotateFn(0, tips[0]);
                break;
            case 2:
         
                rotateFn(60, tips[5]);
                break;
            case 3:
          
                rotateFn(180, tips[4]);
                break;
            case 4:
         
                rotateFn(120, tips[1]);
                break;
            case 5:
         
                rotateFn(-60, tips[2]);
                break;
            case 6:
         
                rotateFn(-120, tips[3]);
                break;
        }
    }

    //选中函数。参数:奖品序号、角度、提示文字
    function rotateFn(angle, text) {
        /*手机号的处理
        var arr = [13477735912, 13100656035, 15926909285];
        var a = arr[0] + "";
        var f = a.substr(0, 3);
        var l = a.substr(7, 4);*/
        bool = true;
        $prize.stopRotate();
        $prize.rotate({
            angle: 0,//旋转的角度数
            duration: 4000, //旋转时间
            animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转。也就是至少转4圈
            callback: function () {
                bool = false; // 标志为 执行完毕
         
                win(text);
                $('#change').text('请30分钟后再来')
                //show(1, 1, text);
            }
        });
    }

    //中奖信息滚动。前两个参数为手机号前三位和后四位手机尾号,text为中的什么奖品
    function show(sNum, eNum, text) {
        //最新中奖信息
        $sNum.eq(2).html(sNum);
        $eNum.eq(2).html(eNum);
        $info.eq(2).html(text);
        $li.css("top", "-" + 40 / 75 + "rem");//滚动
        //滚动之后的处理
        setTimeout(function () {
            $li.css({
                "top": "0",
                "transition": "all 0s ease-in-out"
            });
            //更新中奖信息
            $sNum.eq(0).html($sNum.eq(1).html());
            $eNum.eq(0).html($eNum.eq(1).html());
            $info.eq(0).html($info.eq(1).html());
            $info.eq(1).html($info.eq(2).html());
            $sNum.eq(1).html($sNum.eq(2).html());
            $eNum.eq(1).html($eNum.eq(2).html());
        }, 500);
        $li.css("transition", "all 0.5s ease-in-out");
    }

    //中奖信息提示
    $("#close,.win,.btn").click(function () {
        $prize.addClass("running");
        init();
    });
});

后端接口:/home/lottery/ajax_lottery

public function ajax_lottery()
    {
        if (request()->isPost()) {
            $uid = I('uid','');
            $token = I('token','');

            if($uid==''||$token=='')
            {
                exit(json_encode(['code'=>1010,'msg'=>'uid或token错误']));
            }
            $user = Db::name('users')->where(['id'=>$uid,'token'=>$token])->find();
            if(!user)
            {
                exit(json_encode(['code'=>1010,'msg'=>'用户不存在']));
            }
            else
            {
                $last_lottery= Db::name('lottery_log')->where('uid',$uid)->order('add_time desc')->find();
                $time = time();
                //没有抽过奖
                if(empty($last_lottery))
                {
                    $lottery = self::lottey();
                    //抽奖
                    if($lottery)
                    {
                        //http://shop.scarecrowabi.com:81/home/lottery/show?uid=12850&token=7d5445eb642ba6d8eda2fe6cf0fb7b6b

                        if($lottery['jifen']!=='谢谢参与'&&$lottery['jifen']!==0)
                        {
                            $data = [
                                'add_time' => time(),
                                'uid'=> $uid,
                                'type'=>'转盘',
                                'prize_name'=> $lottery['prize'],
                                'jifen'=>$lottery['jifen'],
                                'total_jifen'=>$last_lottery['total_jifen']+$lottery['jifen']
                            ];
                            Db::name('lottery_log')->insert($data);
                        }

                        exit(json_encode(['code'=>0,'data'=>$lottery]));
                    }
                }
                else
                {
                    $lottery_config = Db::name('lottery_config')->find("1");

                    $timediff =  $time - $last_lottery['add_time'];
                    $timediff_min = intval($timediff/60);



                    if($timediff_min>$lottery_config['time'])
                    {
                        $lottery = self::lottey();
                        //抽奖
                        if($lottery)
                        {
                            //http://shop.scarecrowabi.com:81/home/lottery/show?uid=12850&token=7d5445eb642ba6d8eda2fe6cf0fb7b6b

                            $data = [
                                'add_time' => time(),
                                'uid'=> $uid,
                                'type'=>'转盘',
                                'prize_name'=> $lottery['prize'],
                                'jifen'=>$lottery['jifen'],
                                'total_jifen'=>$last_lottery['total_jifen']+$lottery['jifen']
                            ];

                            if($lottery['jifen']=='谢谢参与'||$lottery['jifen']==0)
                            {
                                $data['jifen'] = 0;
                                $data['total_jifen'] = $last_lottery['total_jifen'];
                            }

                            Db::name('lottery_log')->insert($data);

                            exit(json_encode(['code'=>0,'data'=>$lottery]));
                        }
                    }
                    else
                    {

                        exit(json_encode(['code'=>1010,'msg'=>'请'.($lottery_config['time']-$timediff_min).'分钟后再来']));
                    }
                }


            }
        }

    }


    /*
     * 经典的概率算法,
     * $proArr是一个预先设置的数组,
     * 假设数组为:array(100,200,300,400),
     * 开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内,
     * 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间,
     * 在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的。
     * 这样 筛选到最终,总会有一个数满足要求。
     * 就相当于去一个箱子里摸东西,
     * 第一个不是,第二个不是,第三个还不是,那最后一个一定是。
     * 这个算法简单,而且效率非常高,
     * 这个算法在大数据量的项目中效率非常棒。
     */
    public function get_rand($proArr) {
        $result = '';
        //概率数组的总概率精度
        $proSum = array_sum($proArr);
        //概率数组循环
        foreach ($proArr as $key => $proCur) {
            $randNum = mt_rand(1, $proSum);
            if ($randNum <= $proCur) {
                $result = $key;
                break;
            } else {
                $proSum -= $proCur;
            }
        }
        unset ($proArr);
        return $result;
    }

    public function lottey()
    {
        $info = Db::name('lottery_config')->find("1");
        $prize = json_decode($info['more'],true);

        $prize_arr = [];
        $angle = 0;//角度
        foreach ($prize as $k=>$v)
        {

            switch ($k)
            {
                case 0:
                    $angle = 0;
                    break;
                case 1:
                    $angle = -60;
                    break;
                case 2:
                    $angle = -120;
                    break;
                case 3:
                    $angle = 180;
                    break;
                case 4:
                    $angle = 120;
                    break;
                case 5:
                    $angle = 60;
                    break;
            }
            $prize_arr[] =
            [
                'id' => $k+1,
                'prize' => $v['prize_name'],
                'v' => $v['prize_rate'],
                'angle' => $angle,
                'jifen' => intval($v['jifen'])
            ];
        }
        //print_r($prize_arr);die;

        /*
         * 奖项数组
         * 是一个二维数组,记录了所有本次抽奖的奖项信息,
         * 其中id表示中奖等级,prize表示奖品,v表示中奖概率。
         * 注意其中的v必须为整数,你可以将对应的 奖项的v设置成0,即意味着该奖项抽中的几率是0,
         * 数组中v的总和(基数),基数越大越能体现概率的准确性。
         * 本例中v的总和为100,那么平板电脑对应的 中奖概率就是1%,
         * 如果v的总和是10000,那中奖概率就是万分之一了。
         *
         */
//        $prize_arr = array(
//            '0' => array('id'=>1,'prize'=>'平板电脑','v'=>1),
//            '1' => array('id'=>2,'prize'=>'数码相机','v'=>5),
//            '2' => array('id'=>3,'prize'=>'音箱设备','v'=>10),
//            '3' => array('id'=>4,'prize'=>'4G优盘','v'=>12),
//            '4' => array('id'=>5,'prize'=>'10Q币','v'=>22),
//            '5' => array('id'=>6,'prize'=>'谢谢参与','v'=>50)
//        );


        /*
         * 每次前端页面的请求,PHP循环奖项设置数组,
         * 通过概率计算函数get_rand获取抽中的奖项id。
         * 将中奖奖品保存在数组$res['yes']中,
         * 而剩下的未中奖的信息保存在$res['no']中,
         * 最后输出json个数数据给前端页面。
         */
        foreach ($prize_arr as $key => $val) {
            $arr[$val['id']] = $val['v'];
        }

        $rid = self::get_rand($arr); //根据概率获取奖项id

        $res['yes'] = $prize_arr[$rid-1]['prize']; //中奖项
        $res['yes_angle'] = $prize_arr[$rid-1]['angle']; //中奖项
        $res['jifen'] = $prize_arr[$rid-1]['jifen']; //中奖项

        unset($prize_arr[$rid-1]); //将中奖项从数组中剔除,剩下未中奖项
        shuffle($prize_arr); //打乱数组顺序
        for($i=0;$i<count($prize_arr);$i++){
            $pr[] = $prize_arr[$i]['prize'];
        }
        $res['no'] = $pr;
        //print_r($res);
        return ['prize'=>$res['yes'],'angle'=>$res['yes_angle'],'jifen'=>$res['jifen']];

    }