文档章节

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

Y
 Yhon
发布于 2016/12/10 22:23
字数 1236
阅读 215
收藏 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
白银
私信 提问
JeeWx微信插件-大转盘抽奖活动(要求P3-Weixin框架)

[项目描述] 大转盘是一种抽奖活动类型,本项目要求开发一套界面美观,配置灵活,逻辑严谨的大转盘抽奖活动,可用于微信公众号营销。基本要求如下: 1. 抽奖活动的项目可通过页面配置,包括奖...

Jeecg
2015/11/23
11
0
在微信上呈现大转盘抽奖活动(很简单,速来捡钱)

大转盘是一种抽奖活动类型,本项目要求开发一套界面美观,配置灵活,逻辑严谨的大转盘抽奖活动,主要用于通过微信公众号推广此活动,实现网站用户注册。基本要求如下: 1. 抽奖活动的项目可通...

xl123666
2016/01/25
4
0
在微信上呈现大转盘抽奖活动(很简单,速来捡钱)

大转盘是一种抽奖活动类型,本项目要求开发一套界面美观,配置灵活,逻辑严谨的大转盘抽奖活动,主要用于通过微信公众号推广此活动,实现网站用户注册。基本要求如下: 1. 抽奖活动的项目可通...

xl123666
2016/01/23
6
0
H5活动之家平台,开启国庆双十一福利,活动全免费

H5活动之家,国内最大的微信活动平台,开启国庆双十一福利,平台开放活动全部免费,不限制参与人数、不限并发、不限流量,不限活动数量。免注册扫描登录h5huodong.com(各种微信活动:微信砍...

Jeecg
09/29
0
0
Jeewx微信插件 - 刮刮乐抽奖活动(要求P3-Weixin框架)

Jeewx微信插件 - 刮刮乐抽奖活动 技术要求:采用P3-Weixin框架 [项目描述] 刮刮乐是一种抽奖活动类型,本项目要求开发一套界面美观,配置灵活,逻辑严谨的刮刮乐抽奖活动,可用于微信公众号营...

Jeecg
2015/11/23
1
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS官方钱包keosd

EOS官方钱包的名称是keosd,它负责管理你的私钥,并且帮你进行交易的签名。 不过不幸的是,keosd钱包对普通用户并不友好,它是一个命令行程序,目前还没有像以太坊的mist那样的图形化界面,而...

汇智网教程
今天
24
0
ArrayList的实现原理以及实现线程安全

一、ArrayList概述 ArrayList是基于数组实现的,是一个动态的数字,可以自动扩容。 ArrayList不是线程安全的,效率比较高,只能用于单线程的环境中,在多线程环境中可以使用Collections.syn...

一看就喷亏的小猿
今天
28
0
Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
34
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
44
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
22
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部