DouPHP+Ajax实现九宫格抽奖

最新推荐文章于 2023-03-24 22:10:10 发布
最新推荐文章于 2023-03-24 22:10:10 发布
阅读量437 收藏 1
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaituozheboke/article/details/80838512
版权

前端：jq+h5 实现九宫格动效
后端：thinkphp3.2.3 实现中奖概率算法
功能：支持读取数据库预设的中奖率及奖品池，中奖率可以自定义，必须是整数

前段页面

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>

    <title>用户中心</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <meta name="keywords" content="{$keywords}" />
    <meta name="description" content="{$description}" />
    <script src="images/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="images/layui/css/layui.css">
    <script type="text/javascript" src="images/layui/layui.all.js"></script>
    <style type="text/css">
    {literal}
            .container{width:100%;height:auto;line-height: 100%;text-align: center;}
            #lottery{width:100%;height:355px;margin:auto;}
            table{
                width:80%;
                margin: 10px auto;
            }
            #lottery table td{width:33%;height:115px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999;    padding: 2px;

            }
            /*#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}*/
            #lottery table td.active{background-color:#fff333;border-radius: 10px;}

            #start {color:white;background:orange;
                border-radius: 10px;
                height:110px;
                line-height: 113px;
                width:110px;
                box-shadow: 2px 2px 5px #777373;
                margin: 4px auto;
                /*margin: 10% 10% 10% 10%;*/
                text-align: center;
                display: block;
                text-decoration: none;
            }
            #con_prize{display: none;margin-top: 10px;color:white}
            #pname{color:red;margin-left: 5px;margin-right: 10px;font-size: 20px;}
            .prize{
                color:red;
                font-weight: 900;
                background:url('/images/bin.png') 80% no-repeat;
                background-size: 100%;
                height:110px;width: 110px;
                border-radius: 5px;
                margin: auto;
                line-height: 113px;

            }
            .on{opacity: 1;color:#fff;background: rgb(3, 169, 244)}
    {/literal}
</style>
</head>
<body>


    <div id="wrapper" style="background: url('/images/bg.jpg');">


        <!-- {if $rec eq 'prize'} -->
        <img src="/images/top.png" style="width:100%">
        <div id="con_prize" data-pname="" data-pid="1">恭喜您获得：<span id="pname"></span></div>

        <div class="container">

    <div id="lottery">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td class="lottery-unit lottery-unit-0"><div class="prize prize-0">{$zero}金币</div></td>
                <td class="lottery-unit lottery-unit-1"><div class="prize prize-1">{$one}金币</div></td>
                <td class="lottery-unit lottery-unit-2"><div class="prize prize-2">{$two}金币</div></td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-7"><div class="prize prize-7">{$seven}金币</div></td>
                <td ><a href="#" class = "lottery-unit" id="start">签到抽奖</a></td>
                <td class="lottery-unit lottery-unit-3"><div class="prize prize-3">{$three}金币</div></td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-6"><div class="prize prize-6">{$six}金币</div></td>
                <td class="lottery-unit lottery-unit-5"><div class="prize prize-5">{$five}金币</div></td>
                <td class="lottery-unit lottery-unit-4"><div class="prize prize-4">{$four}金币</div></td>
            </tr>
        </table>



    </div>


</div>
<div style="width:88%;border:1px dashed white;margin: 10px auto;padding:3px;color:white;text-align:center;">
            <span style="color:white">《&nbsp金币兑换规则&nbsp》</span>
            <div style="text-align: left;">
                {$account}
            </div>
        </div>

<script type="text/javascript">

        {literal}
        var lottery={
                index:-1,    //当前转动到哪个位置，起点位置
                count:8,    //总共有多少个奖品位置，9宫格就是8个奖品位置
                timer:0,    //setTimeout的ID，用clearTimeout清除
                speed:10,    //初始转动速度
                times:0,    //转动次数
                cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
                prize:0,    //默认中奖位置，放默认奖品
                init:function(id){
                        if ($("#"+id).find(".lottery-unit").length>0) {
                                $lottery = $("#"+id);
                                $units = $lottery.find(".lottery-unit");
                                this.obj = $lottery;
                                this.count = $units.length;
                                $lottery.find(".prize-"+this.index).addClass("on");
                        };
                },
                roll:function(){
                        var index = this.index;
                        var count = this.count;
                        var lottery = this.obj;
                        $(lottery).find(".prize-"+index).removeClass("on");
                        index += 1;
                        if (index>count-1) {
                            index = 0;
                        };
                        $(lottery).find(".prize-"+index).addClass("on");
                        this.index=index;
                        return false;
                    },
                stop:function(index){
                        this.prize=index;
                        return false;
                    }
        };

        //存储奖品信息
        var prize_data = {
            pname:'默认奖品',    //奖品名称
            pnum:0,    //中奖位置 默认0，重要，转盘据此来定位获奖商品
            pid:1,    //奖品id 默认1
        };


        function roll(){
            lottery.times += 1;
            lottery.roll();

            if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
                clearTimeout(lottery.timer);
                lottery.times=0;
                click=false;
                //显示中奖信息
                showDetail();
            }else{
                //速度控制
                if (lottery.times<lottery.cycle) {
                    lottery.speed -= 10;
                }else if(lottery.times==lottery.cycle) {
                    index = lottery.prize;     
                }else{
                    if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                        lottery.speed += 110;
                    }else{
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed<40) {
                    lottery.speed=40;
                };
                //延时递归调用
                lottery.timer = setTimeout(roll,lottery.speed);

            }

            return false;
        }
        /*
         * 获取中奖位置
         * @param {string} name 用户昵称（必须）
         * @param {string} avatar 微信头像网址（必须）
         * @param {string} openid 微信openid（必须，用于验证唯一性，一个用户只能抽奖一次）
         * @return {bool} 
         */
        function doRoll(url,name,avatar,openid){

            $.ajax({
            url: url,
            data:{name:name,avatar:avatar,openid:openid},
            contentType:"application/json; charset=utf-8",
            dataType: "json",
            success: function(rst){
            console.log(rst);
                if(rst == 7){
                        layer.alert('活动已结束', {icon: 5});
                        return;
                }
                if(rst == 6){
                    layer.alert('今天已经抽过奖了，明天再来吧', {icon: 5});
                    return;
                }

                lottery.speed=100;


                lottery.prize = rst.pnum;
                prize_data = {
                        pname:rst.pname,
                        pnum:rst.pnum,
                        pid:rst.pid
                    };
                saveprize_jf(prize_data);
                roll();
                click=true;
                return false;

            }});
        }

        //领奖(跳转收货地址页面，或者弹出收货地址页面)
        function getPrize(){
            alert("请填写收货地址");
        }
        //清空中奖信息
        function clearDetail(){
            $("#con_prize").hide();
            $("#pname").html("");
        }
        //显示中奖信息
        function showDetail(){
            $("#con_prize").show();

            $("#pname").html(prize_data.pname);

        }
        function saveprize_jf(){            
            $.ajax({
             type: "GET",
             url: "/prizedraw.php?rec=upprizejf",
             data: {prizeid:prize_data.pid},
             dataType: "json",
             success: function(data){
                         console.log(data);
                      }
         });
        }

        var click=false;

        window.onload=function(){
            var url = '/prizedraw.php?rec=prizedraw';//这里改成实际后台抽奖接口
            lottery.init('lottery');
            $("#start").click(function(){
                if (click) {
                    return false;
                }else{              
                    clearDetail();
                    doRoll(url,"name","avatar","openid");
                }
            });
        };
{/literal}
</script>


        <!-- {/if} -->




    </div>

    {include file="inc/footer2.tpl"} 
</body>
</html>

控制器层

if($rec == "prizedraw"){

            //活动是否结束
            $is_prize = $dou->select($dou->table('config'), '*', '`name` = \'is_prize\'');
            $switch = $dou->fetch_array($is_prize);
            if($switch['value'] != 1){
                $data = 7;
                echo json_encode($data);
                exit;
            }

            //判断用户今天是否有抽奖机会
            if($_SESSION['user_name']){
                $sess = $_SESSION['user_name'];
                $queryf = $dou->select($dou->table('user'), '*', "`user_name` = '$sess'");
                $user = $dou->fetch_array($queryf);    
                $today = strtotime('today');
                if($user['sign_in'] < $today){                 
                    $sql = "UPDATE " . $dou->table('user') . " SET sign_in = '$today' WHERE user_name = '$_SESSION[user_name]'";
                    $dou->query($sql); 
                }else{
                    $data = 6;
                    echo json_encode($data);
                    exit;
                }
            }

            $queryf = $dou->select($dou->table('config'), '*', '`name` = \'prize_value\'');
            $config = $dou->fetch_array($queryf);
            $prize_res = explode(PHP_EOL,$config['value']);


            $zero = explode('=',$prize_res['0']);
            $one = explode('=',$prize_res['1']);
            $two = explode('=',$prize_res['2']);
            $three = explode('=',$prize_res['3']);  
            $four = explode('=',$prize_res['4']);      
            $five = explode('=',$prize_res['5']);      
            $six = explode('=',$prize_res['6']);
            $seven = explode('=',$prize_res['7']);


        // $nick = $_GET('nick');
        // $avatar = $_GET('avatar');
        // $openid = $_GET('openid');
        //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"=>"$zero[0]金币","percent"=>$zero[1]),
            array("id"=>2,"name"=>"$one[0]金币","percent"=>$one[1]),
            array("id"=>3,"name"=>"$two[0]金币","percent"=>$two[1]),
            array("id"=>4,"name"=>"$three[0]金币","percent"=>$three[1]),
            array("id"=>5,"name"=>"$four[0]金币","percent"=>$four[1]),
            array("id"=>6,"name"=>"$five[0]金币","percent"=>$five[1]),
            array("id"=>7,"name"=>"$six[0]金币","percent"=>$six[1]),
            array("id"=>8,"name"=>"$seven[0]金币","percent"=>$seven[1]),
            );


        //下标存储数组100个下表，0-7 按概率分配对应的数量

        $indexArr = array();
        for($i=0;$i<sizeof($arr8);$i++){
            for($j=0;$j<$arr8[$i]['percent'];$j++){
                //index 追加到数组indexArr
                array_push($indexArr, $i);
            }
        }
        //数组乱序
        shuffle($indexArr);
        //从下标数组中随机取一个下标作为中奖下标，$rand_index 是$indexArr的随机元素的下标（0-99）
        $rand_index = array_rand($indexArr,1);
        //获取中奖信息
        $prize_index = $indexArr[$rand_index];
        $prizeInfo = $arr8[$prize_index];


        $data['pnum'] = $prize_index;//对应前端奖品编号
        $data['pid'] = $prizeInfo['id'];
        $data['pname'] = $prizeInfo['name'];
        echo json_encode($data);
        // $this->success($data);
        /*自己封装的success，正常应该这样写 
        $this->ajaxReturn(array(
                'data'=>$data,
                'info'=>'成功',
                'status'=>1
            ));*/

}elseif($rec == 'upprizejf'){
    $id = $_GET['prizeid'] - 1;  
    $queryf = $dou->select($dou->table('config'), '*', '`name` = \'prize_value\'');
    $config = $dou->fetch_array($queryf);
    $prize_res = explode(PHP_EOL,$config['value']);
    $jifen = explode('=',$prize_res[$id]);

    //查询积分
    $queryf = $dou->select($dou->table('user'), '*', "`user_name` = '$_SESSION[user_name]'");
    $user = $dou->fetch_array($queryf);
    //总积分
    $account_prize = $jifen[0] + $user['prize_jf'];
    //修改签到积分
    $sql = "UPDATE " . $dou->table('user') . " SET prize_jf = '$account_prize' WHERE user_name = '$_SESSION[user_name]'";
    $dou->query($sql); 
}
窦源君
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
开源版摇一摇九宫格抽奖小程序PHP源码 万能门店.zip
05-22
开源版摇一摇九宫格抽奖小程序源码 万能门店 开源版抽奖小程序源码，九宫格的抽奖界面，有九个方格， 除却中间的格子为抽奖按钮，余下的8个格子均可根据需求自定义设置奖品 用户进入九宫格抽奖小程序，摇一摇、点击抽奖按钮进行抽奖， 分享活动给好友还可以额外获取抽奖次数 万能的守将小程序，适用门店广，小活动也可以用的着哟~ 网站截图开源版摇一摇九宫格抽奖小程序源码 万能门店 开源版抽奖小程序源码，九宫格的抽奖界面，有九个方格， 除却中间的格子为抽奖按钮，余下的8个格子均可根据需求自定义设置奖品 用户进入九宫格抽奖小程序，摇一摇、点击抽奖按钮进行抽奖， 分享活动给好友还可以额外获取抽奖次数 万能的守将小程序，适用门店广，小活动也可以用的着哟~ 网站截图开源版摇一摇九宫格抽奖小程序源码 万能门店 开源版抽奖小程序源码，九宫格的抽奖界面，有九个方格， 除却中间的格子为抽奖按钮，余下的8个格子均可根据需求自定义设置奖品 用户进入九宫格抽奖小程序，摇一摇、点击抽奖按钮进行抽奖， 分享活动给好友还可以额外获取抽奖次数 万能的守将小程序，适用门店广，小活动也可以用的着哟~
php9宫格抽奖程序_PHP实现抽奖功能实例代码
weixin_39624774的博客
12-22 680
在项目开发中经常会遇到花钱抽奖类型的需求。但是老板总是担心用户用小钱抽到大奖。这样会导致项目亏损。下边这段代码可以有效制止抽奖项目亏钱。个人奖池：语言：thinkphp redis mysql表：desire抽奖商品表 desire_log用户抽奖奖品表 user_desire_log用户抽奖记录表 desire_risk抽奖风控表需求：用户奖池分为进行中奖池 和已完成奖池 当用户抽到大奖后 ...
新盲盒星球抽奖商城手机网站源码 随机开箱抢购
banzhuan678的博客
03-03 1062
介绍： 盲盒抽奖移动端盲盒星球泡泡玛特抽盒机盲盒手机站源码商城系统 潮玩盲盒系统商城APP公众号H5一番赏盲盒源码 2022年开发的Thinkphp5盲盒商城完整运营源码/对接免签接口 1、上传源码至网站根目录，创建数据库并导入 2、网站运行目录选择/public，关闭防跨站 3、网站伪静态规则选择thinkphp 4、开始ssl，打开强制https（在宝塔一键配置就可以） 5、数据库修改地址：.env 文件 6、后台地址：域名/zgsht.php 账号密码：admin   123456
php9宫格抽奖程序_PHP抽奖算法程序代码分享
weixin_39749501的博客
12-22 497
抽奖算法需要满足的需求如下：1.可以控制中奖的概率2.具有随机性3.最好可以控制奖品的数量4.根据用户ID或者ip、手机号、QQ号等条件限制抽奖次数初期就这些需求，然后根据网上的资料，采用了一种阶段式抽取的方法，大家下面看一下整体的程序：该程序是在ThinkPHP框架下完成的，使用了一些框架自带的类库和函数，下面我会逐一进行说明，控制器部分：代码如下/***** @lanfengye */clas...
php中奖概率设计，适用于大转盘、九宫格等游戏
sheeppigtiger的博客
02-01 697
php中奖概率设计，适用于大转盘、九宫格等游戏
PHP+jQuery+Ajax九宫格抽奖转盘.zip
11-29
PHP+jQuery+Ajax九宫格抽奖转盘。
PHP+jQuery+Ajax九宫格抽奖转盘
01-26
PHP+jQuery+Ajax九宫格抽奖转盘
一个jquery九宫格抽奖效果
04-26
jquery九宫格抽奖，有测试代码和用ajax请求的效果代码
HTML+CSS+ajax+php+mysql实现登录
09-30
HTML+CSS+ajax+php+mysql实现登录。有数据库建表语句。比较简单 适合新手。也是新手学习，踩了很多坑（有坑的地方代码备注比较清楚了）。提供给新手门共同学习。
幸运九宫格抽奖系统带后台源码
www_5438xiazai的博客
03-24 315
幸运九宫格抽奖码抽奖系统，适合营销，门店活动，公司活动，微信抽奖，公众号抽奖。可设置背景音乐，可设置中奖概率，可以设置奖项。抽奖营销工具，广泛应用于 ：公司年会、商场促销、销售促销、答谢会、线上推广：人气获客、推广.1.本程序在PHP5.3 ~ PHP5.6环境完美运行。2.后台访问地址：域名/admin/index.php。3.后台账号密码admin admin。2.修改db.php填写数据库相关信息。1.导入ohltk.sql到数据库。
H5九宫格抽奖，带php文件，完完整整，拿来即用
01-31
H5九宫格抽奖，带php文件，完完整整，拿来即用，这是我自己在项目中使用的代码，我把它抛离出来，送给需要的人
PHP九宫格抽奖源码示例
08-30
PHP九宫格抽奖源码示例
thinkphp九宫格的抽奖
04-10
thinkphp九宫格的抽奖，可以与数据库相连，代码改动小，方便，简单
基于thinkphp5.0的在线抽奖平台前后台附数据库
04-10
基于thinkphp5.0的在线抽奖平台前后台附数据库页面待美化 欢迎指教
【博主推荐】星空版的九宫格酷炫抽奖HTML源码
xcLeigh
10-24 3166
【博主推荐】星空版的九宫格酷炫抽奖HTML源码，内含代码讲解，详细备注。
php九宫格抽奖程序源码
ycdezuiai5201314的博客
10-01 1226
php九宫格抽奖程序源码,可设置背景音乐，可设置中奖概率，可以设置奖项，可设置抽奖码指定中奖。 源码介绍 2种抽奖模式： 1、先登记资料，然后后抽奖， 2、匿名（无需登记，直接抽奖） 支持奖品数量：8个奖项 可自定义页面上的LOGO、奖品图片等素材。 会代码的朋友可以自己对风格调整，设计LOGO、元素调整等。 在线演示：http://www.phprr.com/demo-2045 ...
2022最新幸运九宫格抽奖源码+带后台管理
rgeht的博客
07-25 1226
幸运九宫格抽奖码,九宫格抽奖系统源码php+mysql,微信抽奖系统1.本程序在PHP5.3~PHP5.6环境完美运行2.后台访问地址域名/admin/index.phpadminadmin1.导入1776.sql到数据库2.修改db.php填写数据库相关信息。
php 九宫格验证码,PHP九宫格抽奖源码示例
weixin_35873946的博客
03-11 251
此九宫格抽奖效果使用纯JS制作，兼容IE、火狐、谷歌等浏览器，效果表现好，定制自由度高，值得推荐。而且PHP抽奖已写好，直接拿来用。难易：中级下载资源下载积分：126积分引入抽奖插件lottery.js 九宫格图片 开始抽奖函数start_lottery() function start_lottery(){...
九宫格抽奖代码可导入数据html
最新发布
09-03
其次，通过JavaScript代码，实现九宫格抽奖的逻辑。这部分代码可以使用Ajax来加载导入的数据，可以将数据存放在一个数组中。可以通过获取数组长度来确定九宫格的格子数目，根据数据渲染页面。 接着，采用JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值