Java+Jquery实现转盘抽奖系统

转载 2017年04月25日 11:48:28

原文地址:http://blog.csdn.net/qq_25821067/article/details/53863738?ABstrategy=codes_snippets_optimize_v4

今天平安夜,协会需要做活动,第一个活动就是在群里发红包,第二个就是进协会网站的抽奖系统进行抽奖。

由于需要,所以我零时做了一个抽奖系统,是一种大转盘抽奖的。效果图如下:




这个基于Java抽奖的幸运大转盘抽奖系统是和微信的有点像,改编自一个网友的代码。

前台大概就是html+css+js,后台就是Java(实现的Java抽奖系统)。

后台Java代码为:

  1. package com.ostarsier.servlet;  
  2.   
  3. import java.io.FileOutputStream;  
  4. import java.io.FileWriter;  
  5. import java.io.IOException;  
  6. import java.util.Random;  
  7.   
  8. import javax.servlet.ServletException;  
  9. import javax.servlet.http.HttpServlet;  
  10. import javax.servlet.http.HttpServletRequest;  
  11. import javax.servlet.http.HttpServletResponse;  
  12. /** 
  13.  * 抽奖概率算法来自:http://www.helloweba.com/view-blog-216.html 
  14.  */  
  15. public class AwardServlet extends HttpServlet {  
  16.     private String ip;  
  17.     private String name;  
  18.     private static FileWriter out;  
  19.     private static int ydj=1;//一等奖最多1名  
  20.     private static int edj=2;//二等奖最多2名  
  21.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  22.             throws ServletException, IOException {  
  23.           
  24.         request.setCharacterEncoding("utf-8");  
  25.         ip=request.getParameter("ip");  
  26.         name=request.getParameter("name");  
  27.         Object[][] prizeArr = new  Object[][]{  
  28.                 //里面的指针转动  
  29.                 {1,1,14,"一等奖",10},  
  30.                 {2,16,44,"不要灰心",10},  
  31.                 {3,46,74,"神马也没有",10},  
  32.                 {4,76,104,"祝您好运",10},  
  33.                 {5,106,134,"二等奖",15},  
  34.                 {6,136,164,"再接再厉",10},  
  35.                 {7,166,194,"神马也没有",10},  
  36.                 {8,196,224,"运气先攒着",10},  
  37.                 {9,226,254,"三等奖",20},  
  38.                 {10,256,284,"要加油哦",10},  
  39.                 {11,286,314,"神马也没有",10},  
  40.                 {12,316,344,"谢谢参与",10}  
  41.         };  
  42.         Object result[] = award(prizeArr);//抽奖后返回角度和奖品等级  
  43.         response.setContentType("text/html;charset=UTF-8");  
  44.         response.getWriter().write("{\"angle\":\""+result[0]+"\",\"msg\":\""+result[2]+"\"}");  
  45.     //  System.out.println("转动角度:"+result[0]+"\t奖项ID:"+result[1]+"\t提示信息:"+result[2]);  
  46.     }  
  47.       
  48.     //抽奖并返回角度和奖项  
  49.     public Object[] award(Object[][] prizeArr){  
  50.         //概率数组  
  51.         Integer obj[] = new Integer[prizeArr.length];  
  52.         for(int i=0;i<prizeArr.length;i++){  
  53.             obj[i] = (Integer) prizeArr[i][4];  
  54.         }  
  55.         Integer prizeId = getRand(obj); //根据概率获取奖项id  
  56.         //旋转角度  
  57.         int angle = new Random().nextInt((Integer)prizeArr[prizeId][2]-(Integer)prizeArr[prizeId][1])+(Integer)prizeArr[prizeId][1];  
  58.         String msg = (String) prizeArr[prizeId][3];//提示信息  
  59.         try {  
  60.             if(out==null)  
  61.             {  
  62.                 out=new FileWriter("result.txt");  
  63.               
  64.             }  
  65.             System.out.println();  
  66.             System.out.println("ip:"+ip+"  姓名:"+name+"  获奖等级:"+msg+"\r\n");  
  67.             out.append("ip:"+ip+"  姓名:"+name+"  获奖等级:"+msg+"\r\n");  
  68.             out.flush();  
  69.               
  70.         } catch (IOException e) {  
  71.             System.out.println("异常:"+e.getMessage());  
  72.         }  
  73.           
  74.         return new Object[]{angle,prizeId,msg};  
  75.     }  
  76.     //根据概率获取奖项  
  77.     public Integer getRand(Integer obj[]){  
  78.         Integer result = null;  
  79.         try {  
  80.             int  sum = 0;//概率数组的总概率精度   
  81.             for(int i=0;i<obj.length;i++){  
  82.                 sum+=obj[i];  
  83.             }  
  84.             for(int i=0;i<obj.length;i++){//概率数组循环   
  85.                 int randomNum = new Random().nextInt(sum);//随机生成1到sum的整数  
  86.                 if(randomNum<obj[i]){//中奖  
  87.                     result = i;  
  88.                     break;  
  89.                 }else{  
  90.                     sum -=obj[i];  
  91.                 }  
  92.             }  
  93.         } catch (Exception e) {  
  94.             e.printStackTrace();  
  95.         }  
  96.         if(result.equals(0))  
  97.         {  
  98.               
  99.             if(ydj==0)//一等奖名额没得了就强制给个3等的  
  100.             {  
  101.                 result=8;  
  102.                   
  103.             }else  
  104.             {  
  105.                 ydj=0;  
  106.             }  
  107.               
  108.         }  
  109.         else if(result.equals(4))  
  110.         {  
  111.               
  112.             if(edj>0)  
  113.             {  
  114.                 edj--;  
  115.             }else  
  116.                 result=8;//二等奖名额没得了就强制给个3等的  
  117.           
  118.         }  
  119.           
  120.         return result;  
  121.     }  
  122.       
  123.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  124.             throws ServletException, IOException {  
  125.         doGet(request, response);  
  126.     }  
  127.   
  128. }  

前台为:

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8. <!DOCTYPE html>  
  9. <html>  
  10. <head>  
  11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  12. <meta name="viewport"  
  13.     content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">  
  14. <meta name="apple-mobile-web-app-capable" content="yes">  
  15. <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  16. <meta name="format-detection" content="telephone=no">  
  17.   
  18. <title>幸运大转盘抽奖</title>  
  19. <link href="files/activity-style.css" rel="stylesheet" type="text/css">  
  20. <script type="text/javascript" src="files/jquery.min.js"></script>  
  21. <script type="text/javascript" src="files/jQueryRotate.2.2.js"></script>  
  22. <script type="text/javascript" src="files/jquery.easing.min.js"></script>  
  23. <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>    
  24. <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>     
  25. <script type="text/javascript">  
  26. ip=returnCitySN["cip"];  
  27. name=name;  
  28. </script>  
  29. <style type="text/css">  
  30. .info{  
  31.     width:80%;  
  32.     margin:30px auto;  
  33. }  
  34. .info p{  
  35.     font-size:20px;  
  36.     color:balck;  
  37. }  
  38. .indent{  
  39.     text-indent: 2em;  
  40. }  
  41. </style>  
  42. <script type="text/javascript">  
  43.     $(function() {  
  44.         $("#inner").click(function() {  
  45.               
  46.               
  47.             var nname=$.cookie('name');  
  48.             var iip=$.cookie('ip');  
  49.             if(nname||iip)  
  50.                 {  
  51.                     alert(name+"同学,你已经参加了一次!");  
  52.                 }  
  53.             else  
  54.             {  
  55.                  name=prompt("请输入姓名:");  
  56.                     if(name!=""&&name!='null')  
  57.                         {  
  58.                             lottery();  
  59.                             var t=$.cookie('name',name);  
  60.                             $.cookie('ip',ip);  
  61.                         }  
  62.                     else  
  63.                         {  
  64.                             alert("要想抽奖必须输入姓名!\n请重试!");  
  65.                         }   
  66.                       
  67.                   
  68.                   
  69.             }  
  70.         });  
  71.     });  
  72.       
  73.     function lottery() {  
  74.         data={ip:ip,name:name};  
  75.         $.ajax({  
  76.             type : 'POST',  
  77.             url : 'AwardServlet',  
  78.             dataType : 'json',  
  79.             data:data,  
  80.             cache : false,  
  81.             error : function() {  
  82.                 alert('出错了!');  
  83.                 return false;  
  84.             },  
  85.   
  86.             success : function(json) {  
  87.                 $("#inner").unbind('click').css("cursor", "default");  
  88.                 var angle = parseInt(json.angle); //角度   
  89.                 var msg = json.msg; //提示信息  
  90.                   
  91.                 $("#outer").rotate({ //inner内部指针转动,outer外部转盘转动  
  92.                     duration : 5000, //转动时间   
  93.                     angle : 0, //开始角度   
  94.                     animateTo : 3600 + angle, //转动角度   
  95.                     easing : $.easing.easeOutSine, //动画扩展   
  96.                     callback : function() {  
  97.                         var con = confirm('恭喜'+name+'\n'+msg + '\n请截屏保存,留作领奖兑换!');  
  98.                           
  99.                     }  
  100.                 });  
  101.             }  
  102.         });  
  103.     }  
  104. </script>  
  105. </head>  
  106.   
  107. <body class="activity-lottery-winning">  
  108.     <div style="z-index:9999;position:absolute;top:8px;width:100%;text-align:center;">  
  109.         <p style="color:orange;font-size:1.5em;">软件协会16年圣诞活动抽奖</p>  
  110.     </div>  
  111.     <div class="main">  
  112.     <!--     <script type="text/javascript">  
  113.             var loadingObj = new loading(document.getElementById('loading'), {  
  114.                 radius : 20,  
  115.                 circleLineWidth : 8  
  116.             });  
  117.             loadingObj.show();  
  118.         </script> -->  
  119.   
  120.         <div id="outercont">  
  121.             <div id="outer-cont" style="overflow:hidden;">  
  122.                 <div id="outer">  
  123.                     <img src="files/activity-lottery-1.png" width="310px">  
  124.                 </div>  
  125.             </div>  
  126.             <div id="inner-cont">  
  127.                 <div id="inner">  
  128.                     <img src="files/activity-lottery-2.png">  
  129.                 </div>  
  130.             </div>  
  131.         </div>  
  132.     </div>  
  133.     <div class="info">  
  134.         <p>备注:</p>  
  135.         <p class="indent">同IP,姓名只能参加一次!</p>  
  136.         <p class="indent">如果中奖了请把中奖信息截屏,直接发给会长。</p>  
  137.         <p class="indent">一等:10元(最多1人)</p>  
  138.         <p class="indent">二等:5元(最多2人)</p>  
  139.         <p class="indent">三等:1元(人数无上限)</p>  
  140.     </div>  
  141. </body>  
  142. </html>  



untiy3d实现简单转盘抽奖

在现实生活中,商家为了吸引更多的消费者,抽奖活动无处不在。而在网络虚拟世界中,特别是在网络游戏这一块领域中,抽奖系统更是无形的存在,这将增加了玩家在游戏中的体验。当然单机游戏中也有关于抽奖的事件,但是...
  • u014725878
  • u014725878
  • 2015-09-21 12:40:06
  • 2946

ASP.NET写的转盘抽奖程序

  • 2015年12月22日 17:05
  • 413KB
  • 下载

大转盘抽奖jqurey版,ajax可连接自己的开发语言,源码只提供htm5前端代码

  • 2018年01月30日 14:55
  • 241KB
  • 下载

《用JavaScript实现幸运大转盘抽奖程序》 一

前些日子开发了一个抽奖程序,这个程序百分之九十的逻辑使用JavaScript和JQuery写的,瞬间感觉能JS学到极致,也是一种境界,虽然自己继续向这种境界前进。      首先说一下这抽奖程序的大体...
  • u013067402
  • u013067402
  • 2016-07-28 20:07:56
  • 4774

Android——抽奖转盘的实现

百度日前已经正式从美国加州机动车辆管理局获得了测试自动驾驶汽车的许可。事实上,早在今年四月,百度就宣布在硅谷建立了无人驾驶技术团队,同时计划在今年年底将团队规模扩大到超过100人。该团队目前由机器学习...
  • u013836857
  • u013836857
  • 2016-10-05 09:08:34
  • 2248

APP转盘抽奖Java服务端接口

应公司需求开发一个微信公众号中抽奖活动 功能:奖品及中奖概率可在后台配置,滚动刷新中奖名单,控制用户每日抽奖次数等。 规则:在活动期间,每日可抽奖一次,中奖后填写个人信息以便奖品的配送。 /**...
  • lijie18
  • lijie18
  • 2017-02-27 10:20:18
  • 571

幸运大转盘-jQuery+Java实现的抽奖程序(完整版)

  • 2014年06月28日 00:29
  • 283KB
  • 下载

Android 抽奖转盘的实现

序言最近需要实现一个抽奖的控件,我简单搜索了下,感觉要不很多细节地方没有处理,要么,根本就不能用。索性想自己实现个,从千图网搜了下,挑选了个自己比较喜欢的出来,psd打开后效果如下: 最终实...
  • YanghuiNipurean
  • YanghuiNipurean
  • 2016-08-19 15:10:37
  • 7374

java实现大转盘抽奖的简单思路

大转盘抽奖 近期碰到的一个需求,实现一个类似大转盘抽奖的功能,需自定义奖项,各奖项中奖概率,当日抽奖最大次数,抽奖成本等。分享一个简单的java代码的实现的思路,有不足之处感谢各位指正。...
  • yyzp1993
  • yyzp1993
  • 2017-06-29 23:36:20
  • 5396

《用JavaScript实现转盘抽奖程序》二

接着上篇文章,我将html代码和css代码也总结一下。     HTML代码 ...
  • u013067402
  • u013067402
  • 2016-08-04 23:12:44
  • 1984
收藏助手
不良信息举报
您举报文章:Java+Jquery实现转盘抽奖系统
举报原因:
原因补充:

(最多只允许输入30个字)