app H5活動抽獎活動（轉盤）前端+後臺設計

流程

用戶從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;