Java+Jquery实现转盘抽奖系统

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

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

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

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

前台大概就是html+css+js，后台就是Java（实现的Java抽奖系统）。

后台Java代码为：

[java] view plain copy

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. }  

前台为：

[html] view plain copy

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>  

版权声明：版权是什么东西，看得上的随便转。