文档章节

app H5活动抽奖活动(转盘)前端+后台设计

Y
 Yhon
发布于 2016/12/10 22:23
字数 1236
阅读 184
收藏 2

这里写图片描述

流程

用户从app 进入H5页面 
接口连接:192.168.1.1:8181/youxi/getSession.jsp?userid=1020201 userid为app端传的参数 
getSession.jsp代码 
这里写图片描述 
response.sendRedirect(“youxi/index.html”);//跳向游戏页面 
游戏结束进入抽奖页面 

页面部分代码 
这里写图片描述

js部分代码


<script type="text/javascript">
    //加载页面执行
    $(function(){
    //从session中获取userid  
    var userid = '<%=session.getAttribute("userid")%>';
    $.ajax({
                //请求接口,该接口返回用户剩余抽奖次数 num
                url:"http://api.booea.cn:8105/api/getLotteryNum.jsp?userid="+userid+"&type=getnum",
                type:"get",
                dataType:"json",
                success:function(data){
                    var num = parseInt(data.num);
                    $("#num").text(num);
                    }
    });

    //点击抽奖按钮时执行此function
    var $plateBtn = $('#plateBtn');
    $plateBtn.click(function(){
        var userid = '<%=session.getAttribute("userid")%>';
        var numDom=document.getElementById("num");
        var numVal=parseInt(numDom.innerHTML);
        console.log(numVal);
        //剩余抽奖次数大于0时 ajax请求抽奖接口 返回剩余抽奖次数num和中奖结果result
        if(numVal>0){
            $.ajax({
                url:"http://api.booea.cn:8105/api/lottery.jsp?userid="+userid+"&type=app",
                type:"get",
                dataType:"json",
                success: function(data){
                    //剩余抽奖次数
                    var lotterynum = parseInt(data.num);
                    $("#num").text(lotterynum);
                    //中奖结果
                    var num = parseInt(data.result);
                    switch(num){
                case 1: 
                    rotateFunc(5,90,'恭喜你中了 <em>酒店体验券X1</em>');
                    jumpFunc2();//跳转网页
                    break;
                case 2: 
                    rotateFunc(2,65,'恭喜你中了 <em>金币10</em>');
                    break;
                case 3: 
                    rotateFunc(7,282,'恭喜你中了 <em>金币10</em>');
                    break;
                case 4: 
                    rotateFunc(4,247,'恭喜你中了 <em>金币10 </em>');
                    break;
                case 5: 
                    rotateFunc(2,55,'恭喜你中了 <em>金币10</em>');
                    break;
                case 6: 
                    rotateFunc(6,24,'恭喜你中了 <em>金币10</em>');
                    break;
                case 7: 
                    rotateFunc(7,292,'恭喜你中了 <em>金币10</em>');
                    break;
                case 8:
                    rotateFunc(1,170,'恭喜你中了 <em>七彩云南六日五夜游X1</em>');
                    jumpFunc1();
                    break;
                default:
                    rotateFunc(4,247,'恭喜你中了 <em>金币10</em>');

            }
                //numDom.innerHTML=numVal-1;

                    }
                }); 
        }else{
            alert("好像没有抽奖机会了哦,分享试试!");  
        }
    });

    var $resultTxt = $('#resultTxt');
    var rotateFunc = function(awards,angle,text){  //awards:奖项,angle:奖项对应的角度
        $plateBtn.stopRotate();//转盘静止
        $plateBtn.rotate({
            angle: 0, //指针起始位置角度0
            duration: 5000, //旋转时间5秒
            animateTo: angle + 1440,  //旋转度数 (angle是图片上各奖项对应的角度,1440是让指针固定旋转4圈)
            callback: function(){ //结束时执行的方法
                $resultTxt.html(text);
                $result.show();
            }
        });
    };
    //倒计时跳转云南 case=8时 6秒后跳转网页到信息填写1.html
    var jumpFunc1 = function(){
        setTimeout(function(){
            window.location.href="http://api.booea.cn:8105/huodong/xinxitianxie1.html";
            },6000);
    };
    //倒计时跳转酒店
    var jumpFunc2 = function(){
        //setTimeout(方法,倒计时);
        setTimeout(function(){
            window.location.href="http://api.booea.cn:8105/huodong/xinxitianxie2.html";
            },6000);
    };

    var $resultBtn = $('#resultBtn');
    var $result = $('#result');
    $resultBtn.click(function(){
        $result.hide();
    });

 $(document).ready(function(){
     $(".guanbi").click(function(){
         $(".banner").fadeOut("slow");
     });
 });

$(function(){
    var url = null;
    //$(document).on('click','.jihuir',function(){});
    //等价于$('.jihuir').on('click',function(){});
    //也等价于$('.jihuir').click(function(){});
    $(document).on('click','.jihuir',function(){
        var text = $(this).text();
        $('#loadingDiv').css('display','block');   
        $('#popup').slideDown();
    }); 

});
 //点击弹出蒙版 
 $(document).ready(function(){
     $('#loadingDiv').click(function(){
         $(this).fadeOut("slow");
     });
 });
 //点击刷新重新加载页面 
 $(document).ready(function(){
     $('#choujiang .shuaxin').click(function(){
         window.location.href="http://api.booea.cn:8105/huodong/zhuanpanapp.html";
         alert("klabn");
     });
 });

</script>

页面加载时请求接口

util util = new util();
        t_dao t_dao = new t_dao();
        t_dao.setDao("cloud-01");
        Rs rs = null;
        String json = "";
        String error = "";
        String userid = util.get("userid");
        String type = util.get("type");//接口标示字段
        if("".equals(userid) || userid == null){
            error += "userid为空";
        }
        if("".equals(type) || type == null){
            error += "type为空";  
        }
        if("".equals(error)){
            //获取剩余抽奖次数接口
            if("getnum".equals(type)){
                int n = 0;
                n = t_dao.getNum("t_appuser", "userid='"+userid+"'");
                //若用户为空,向表中填写用户,默认抽奖次数和分享次数都为1
                if(n == 0){
                    rs = t_dao.getRs("t_appuser");
                    rs.set("userid", userid);
                    rs.set("num", 1);
                    rs.set("share",1);
                    t_dao.save(rs);
                    json = "{\"userid\":\""+userid+"\",\"num\":\"1\",\"share\":\"1\"}";
                } else {
                    //存在用户,查询次数
                    String num = t_dao.get("t_appuser","userid='"+userid+"'","num");
                    String share = t_dao.get("t_appuser","userid='"+userid+"'","share");
                    json = "{\"userid\":\""+userid+"\",\"num\":\""+num+"\",\"share\":\""+share+"\"}";
                }
            }
            //分享接口
            if("addnum".equals(type)){
                rs = t_dao.getRs("t_appuser","userid='"+userid+"'");
                String num = rs.get("num");
                String share = rs.get("share");
                //若分享次数为1,抽次数奖加1分享次数变为0;若分享次数为0则不进行任何操作
                if("1".equals(share)){
                    rs.set("num", Tools.isNumber(num)+1);
                    rs.set("share", 0);
                    t_dao.save(rs);
                    json = "{\"userid\":\""+userid+"\",\"num\":\""+(Tools.isNumber(num)+1)+"\",\"share\":\"0\"}";
                }else{
                    json = "{\"userid\":\""+userid+"\",\"num\":\""+num+"\",\"share\":\"0\"}";
                }
            }
        }
    util.out(json);
    util = null;
    t_dao = null;

点击抽奖时请求接口

  //抽奖接口,随机生成中奖序号,返回中奖序号和剩余抽奖次数
        util util = new util();
        t_dao t_dao = new t_dao();
        t_dao.setDao("cloud-01");
        Rs rs = null;
        String json = "";
        String error = "";
        String result = "0";
        int lotteryNum = 0;//剩余抽奖次数
        String userid = util.get("userid");
        String type = util.get("type");//接口标识字段,判断是微信还是app
        if("".equals(userid) || userid == null){
            error += "userid为空";
        }
        if("".equals(type) || type == null){
            error += "type为空";
        }
        if("".equals(error)){
           //随机生成0~1000
          int num = (int) Math.floor(Math.random()*1000);
          //num为0,中奖序号为1,概率千分之一
          if(num == 0){        
              result = ",1";
          }
          else if(num == 1000){        
              result = "8";
          } 
          else {

            int[] data = {1, 2, 3, 4, 5, 6, 7};
            //floor方法为四舍五入
            int n = data[(int) Math.floor(Math.random()*data.length)];
            switch(n){
                case 1: result = "2";
                    break;
                case 2: result = "2";
                    break;
                case 3: result = "3";
                    break;
                case 4: result = "4";
                    break;
                case 5: result = "5";
                    break;
                case 6: result = "6";
                    break;
                case 7: result = "7";
                    break;

                default:result = "2";
            }
        }
          //app端的操作,微信端不进行任何操作
        if("app".equals(type)){
            rs = t_dao.getRs("t_appuser","userid='"+userid+"'");
            String n = rs.get("num");
            rs.set("num", Tools.isNumber(n)-1);
            lotteryNum = Tools.isNumber(n)-1;
            t_dao.save(rs);
            t_dao = null;
            //中奖序号为2~7时金币加10
            if(!("1".equals(result)||"8".equals(result))){
                t_dao t_dao1 = new t_dao();
                Rs rs1 = t_dao1.getRs("t_user","c_userid='"+userid+"'");
                int jinbi = Tools.isNumber(rs1.get("c_jinbi"))+10;
                rs1.set("c_jinbi", jinbi);
                t_dao1.save(rs1);
                t_dao1 = null;
            }
        }   
        }

    json = "{\"error\":\""+error+"\",\"result\":\""+result+"\",\"num\":\""+lotteryNum+"\"}";
    util.out(json);
    out.clear();  
    out = pageContext.pushBody();  
    util = null;

本文转载自:http://blog.csdn.net/ani521smile/article/details/52136777136777

共有 人打赏支持
Y
粉丝 0
博文 11
码字总数 737
作品 0
白银
关于网上积分,你不知道的一些事

关于业务、架构,我们一直在聊电商平台或社交平台等系统的相关内容,有一类平台我们平时见得比较少,但是却在各个活动中扮演了重要的角色,那就是“用户运营平台”,像我们常见的商城中的转盘...

雨多田光
2017/12/11
0
0
iphone7和iphone6系列尺寸和分辨率对比图

作为一个专业的APP设计网站,每一款手机的面世,我们必须了解这个手机的尺寸、视觉效果和分辨率等参数。 然后拿现在市面上主流的手机的尺寸、分辨率、显示效果来进行对比。 之前25学堂分享的...

北方人在上海
2016/10/17
2.6K
0
开源中国马年献礼,Git@OSC 抽奖赢 iPad !

新年伊始,万象更新,为回馈过去一年里,众网友对开源中国的支持,推出轮盘抽奖活动。 具体活动规则如下: Git@OSC的用户由下面列出的获取抽奖机会规则抽奖 获取抽奖机会规则: 每天登陆,并打...

oschina
2014/01/02
7.2K
83
使用postman实现半自动化

前些日子项目要上一个活动,其中有一个功能是幸运大转盘,用户可以随机抽奖,奖品有多种满减券及多种商品,但是奖品都是有抽中概率的,且有的商品还设置有库存,所以测试点便是测试抽奖的概率...

小Di
07/31
0
0
浅谈APP与H5对比!优势都有哪些呢?

很多人再开发一款APP的时候,H5开发相对来说比较便宜一点,原生APP开发则费用较高。那么到底H5跟原生开发有什么区别呢,我们来了解一下两种开发的区别在哪里! H5,指的是HTML5,很多人都认为...

IT智云编程
07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue+element-ui操作删除(单行和批量删除)

页面展示: <template><!-- 表格内容 --><el-table :data="packData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange"><el-tab......

琴妹
10分钟前
0
0
基于vue(element ui) + ssm + shiro 的权限框架

zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目,网上有句话说,语言框架...

DarrenHu_吴邪
17分钟前
1
1
数据库水平切分(MyCat分片)

范围分片 io.mycat.route.function.AutoPartitionByLong 自动范围分片 Function名称:rang-long(配置文件默认) 枚举分片 io.mycat.route.function.PartitionByFileMap 枚举分片 Funtion名称...

这很耳东先生
18分钟前
0
0
读《HeadFirst设计模式》笔记之外观模式

外观模式:提供了一个统一的接口,用来访问子系统中的一群接口。外观定义了一个高层接口,让子系统更容易使用。 举个栗子: 建了一个家庭影院,但是每次享受家庭影院时,你发现需要执行 将灯...

suyain
19分钟前
0
0
MongoDB分片配置

简单注解: mongos 路由进程, 应用程序接入mongos再查询到具体分片,监听端口默认27017 config server 路由表服务, 每一台都具有全部chunk的路由信息 shard为数据存储分片, 每一片都可以是...

LUIS1983
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部