文档章节

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

Y
 Yhon
发布于 2016/12/10 22:23
字数 1236
阅读 177
收藏 2
点赞 0
评论 0

这里写图片描述

流程

用户从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;

© 著作权归作者所有

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

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

雨多田光 ⋅ 2017/12/11 ⋅ 0

开源中国马年献礼,Git@OSC 抽奖赢 iPad !

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

oschina ⋅ 2014/01/02 ⋅ 83

iphone7和iphone6系列尺寸和分辨率对比图

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

北方人在上海 ⋅ 2016/10/17 ⋅ 0

我是如何开发公司年会抽奖系统的?

需求出现 年会将近,而年会抽奖环节必不可少,但是抽奖系统却还没有。所以某一天,PM走过来说:小伙,手头的需求修完成了吧!在年会开始之前必须做出一个抽奖系统。这个系统很简单,后台可以...

通哥 ⋅ 2017/02/25 ⋅ 0

ECJia Opensource Group/ecjia-daojia

ECJia到家 开发语言:PHP 数据库:MySQL 开发框架:ecjia 模板引擎:smarty Github: https://github.com/ecjia/ecjia-daojia 官方网站 官方网站:https://ecjia.com 专题介绍:https://ecjia...

ECJia Opensource Group ⋅ 2017/02/24 ⋅ 0

运营棋牌游戏用户活跃度不高?或许你应该试试这几种方法

  运营岗位,对一款棋牌游戏已经上线的棋牌游戏重要性毋庸置疑。其实说到底,运营的核心只有三点:   1、协同市场和渠道部门,使游戏产品能够让更多的玩家留存并且能更少地流失。   2...

网狐棋牌开发 ⋅ 2017/12/08 ⋅ 0

如何快速搭建微信营销

微官网:快速帮用户打造超炫微信移动网站 “微商城”(又名Vshop)是由上海晖硕信息科技有限公司推出的,一款基于移动互联网的商城应用服务产品,以时下最热门的互动应用微信为媒介,配合微信...

VIICMS ⋅ 2014/03/24 ⋅ 0

幸运大转盘-jQuery+PHP实现的抽奖程序

目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的...

蜗牛奔跑 ⋅ 2015/07/06 ⋅ 0

2017金狮奖投票开启,参与有机会获得iPhone X!

  2017年金狮奖投票现已火热开启,在这里,创意硬件,家居智能,iOS精华软件统统给你!   “威你尽现 科技锋范”由威锋网(feng.com)主办的2017威锋网金狮奖投票活动将于12月13日正式开...

镁客网 ⋅ 2017/12/16 ⋅ 0

在安卓app上集成分享功能 多图慎入

功能点介绍: 1.支持微信,QQ,新浪微博,QQ空间,短信,邮件等多家大型社交媒体平台一键分享 2.支持积分抽奖活动在线活动创建 3.后台多维度数据统计用户分享行为以及其他数据,让您及时做出精准的...

曼曼哒 ⋅ 2014/07/22 ⋅ 5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Boost库编译应用

版本:Boost 1.66.0 Windows库编译 官网指南:直接执行bootstrap.bat处理文件即可,可以我却遇到一堆的问题。 环境:Windows 10 + Visual Studio 2017 Boost编译出来库命名 boost库生成文件命...

水海云 ⋅ 24分钟前 ⋅ 0

解决Eclipse发布到Tomcat丢失依赖jar包的问题

如果jar文件是以外部依赖的形式导入的。Eclipse将web项目发布到Tomcat时,是不会自动发布这些依赖的。 可以通过Eclipse在项目上右击 - Propertics - Deployment Assembly,添加“Java Build ...

ArlenXu ⋅ 24分钟前 ⋅ 0

iview tree组件层级过多时可左右滚动

使用vue+iview的tree组件,iview官网iview的tree树形控件 问题描述:tree层级过多时左右不可滚动 问题解决:修改overflow属性值 .el-tree-node>.el-tree-node_children { overflow: vi...

YXMBetter ⋅ 26分钟前 ⋅ 0

分布式锁

1.通过数据库实现 http://www.weizijun.cn/2016/03/17/%E8%81%8A%E4%B8%80%E8%81%8A%E5%88%86%E5%B8%83%E5%BC%8F%E9%94%81%E7%9A%84%E8%AE%BE%E8%AE%A1/ 2.ZK实现:curator-recipes分布式锁的......

素雷 ⋅ 35分钟前 ⋅ 0

Sublime Text3 快捷键

选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。 Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名...

AndyZhouX ⋅ 41分钟前 ⋅ 0

XamarinAndroid组件教程RecylerView自定义适配器动画

XamarinAndroid组件教程RecylerView自定义适配器动画 如果RecyclerViewAnimators.Adapters命名空间中没有所需要的适配器动画,开发者可以自定义动画。此时,需要让自定义的动画继承Animation...

大学霸 ⋅ 42分钟前 ⋅ 0

eureka 基础(二)

使用Eureka服务器进行身份验证 如果其中一个eureka.client.serviceUrl.defaultZone网址中包含一个凭据(如http://user:password@localhost:8761/eureka)),HTTP基本身份验证将自动添加到您...

明理萝 ⋅ 45分钟前 ⋅ 1

Kubernetes(五) - Service

Kubernetes解决的另外一个痛点就是服务发现,服务发现机制和容器开放访问都是通过Service来实现的,把Deployment和Service关联起来只需要Label标签相同就可以关联起来形成负载均衡,基于kuberne...

喵了_个咪 ⋅ 45分钟前 ⋅ 0

更新队友POM文件后报错

打开报错的地方的pom及其引用方法所在文件的pom,观察其版本号是否一致,不一致进行更改

森火 ⋅ 58分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部