Java+Jquery实现转盘抽奖系统

骑猪看日落 2022-07-13 04:29 574阅读 0赞

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

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

![SouthEast][]

![SouthEast 1][]

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

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

后台Java代码为：

package com.ostarsier.servlet;
    
    import java.io.FileOutputStream;
    import java.io.FileWriter;
    import java.io.IOException;
    import java.util.Random;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    /**
     * 抽奖概率算法来自：http://www.helloweba.com/view-blog-216.html
     */
    public class AwardServlet extends HttpServlet {
    	private String ip;
    	private String name;
    	private static FileWriter out;
    	private static int ydj=1;//一等奖最多1名
    	private static int edj=2;//二等奖最多2名
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		
    		request.setCharacterEncoding("utf-8");
    		ip=request.getParameter("ip");
    		name=request.getParameter("name");
    		Object[][] prizeArr = new  Object[][]{
    				//里面的指针转动
    				{1,1,14,"一等奖",10},
    				{2,16,44,"不要灰心",10},
    				{3,46,74,"神马也没有",10},
    				{4,76,104,"祝您好运",10},
    				{5,106,134,"二等奖",15},
    				{6,136,164,"再接再厉",10},
    				{7,166,194,"神马也没有",10},
    				{8,196,224,"运气先攒着",10},
    				{9,226,254,"三等奖",20},
    				{10,256,284,"要加油哦",10},
    				{11,286,314,"神马也没有",10},
    				{12,316,344,"谢谢参与",10}
    		};
    		Object result[] = award(prizeArr);//抽奖后返回角度和奖品等级
    		response.setContentType("text/html;charset=UTF-8");
    		response.getWriter().write("{\"angle\":\""+result[0]+"\",\"msg\":\""+result[2]+"\"}");
    	//	System.out.println("转动角度:"+result[0]+"\t奖项ID:"+result[1]+"\t提示信息:"+result[2]);
    	}
    	
    	//抽奖并返回角度和奖项
    	public Object[] award(Object[][] prizeArr){
    		//概率数组
    		Integer obj[] = new Integer[prizeArr.length];
    		for(int i=0;i<prizeArr.length;i++){
    			obj[i] = (Integer) prizeArr[i][4];
    		}
    		Integer prizeId = getRand(obj); //根据概率获取奖项id
    		//旋转角度
    		int angle = new Random().nextInt((Integer)prizeArr[prizeId][2]-(Integer)prizeArr[prizeId][1])+(Integer)prizeArr[prizeId][1];
    		String msg = (String) prizeArr[prizeId][3];//提示信息
    		try {
    			if(out==null)
    			{
    				out=new FileWriter("result.txt");
    			
    			}
    			System.out.println();
    			System.out.println("ip:"+ip+"  姓名:"+name+"  获奖等级:"+msg+"\r\n");
    			out.append("ip:"+ip+"  姓名:"+name+"  获奖等级:"+msg+"\r\n");
    			out.flush();
    			
    		} catch (IOException e) {
    			System.out.println("异常:"+e.getMessage());
    		}
    		
    		return new Object[]{angle,prizeId,msg};
    	}
    	//根据概率获取奖项
    	public Integer getRand(Integer obj[]){
    		Integer result = null;
    		try {
    			int  sum = 0;//概率数组的总概率精度 
    			for(int i=0;i<obj.length;i++){
    				sum+=obj[i];
    			}
    			for(int i=0;i<obj.length;i++){//概率数组循环 
    				int randomNum = new Random().nextInt(sum);//随机生成1到sum的整数
    				if(randomNum<obj[i]){//中奖
    					result = i;
    					break;
    				}else{
    					sum -=obj[i];
    				}
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		if(result.equals(0))
    		{
    			
    			if(ydj==0)//一等奖名额没得了就强制给个3等的
    			{
    				result=8;
    				
    			}else
    			{
    				ydj=0;
    			}
    			
    		}
    		else if(result.equals(4))
    		{
    			
    			if(edj>0)
    			{
    				edj--;
    			}else
    				result=8;//二等奖名额没得了就强制给个3等的
    		
    		}
    		
    		return result;
    	}
    	
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }

前台为：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
    	content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    
    <title>幸运大转盘抽奖</title>
    <link href="files/activity-style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="files/jquery.min.js"></script>
    <script type="text/javascript" src="files/jQueryRotate.2.2.js"></script>
    <script type="text/javascript" src="files/jquery.easing.min.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>   
    <script type="text/javascript">
    ip=returnCitySN["cip"];
    name=name;
    </script>
    <style type="text/css">
    .info{
    	width:80%;
    	margin:30px auto;
    }
    .info p{
    	font-size:20px;
    	color:balck;
    }
    .indent{
    	text-indent: 2em;
    }
    </style>
    <script type="text/javascript">
    	$(function() {
    		$("#inner").click(function() {
    			
    			
    			var nname=$.cookie('name');
    			var iip=$.cookie('ip');
    			if(nname||iip)
    				{
    					alert(name+"同学，你已经参加了一次!");
    				}
    			else
    			{
    				 name=prompt("请输入姓名:");
    					if(name!=""&&name!='null')
    						{
    							lottery();
    							var t=$.cookie('name',name);
    							$.cookie('ip',ip);
    						}
    					else
    						{
    							alert("要想抽奖必须输入姓名!\n请重试!");
    						} 
    					
    				
    				
    			}
    		});
    	});
    	
    	function lottery() {
    		data={ip:ip,name:name};
    		$.ajax({
    			type : 'POST',
    			url : 'AwardServlet',
    			dataType : 'json',
    			data:data,
    			cache : false,
    			error : function() {
    				alert('出错了！');
    				return false;
    			},
    
    			success : function(json) {
    				$("#inner").unbind('click').css("cursor", "default");
    				var angle = parseInt(json.angle); //角度 
    				var msg = json.msg; //提示信息
    				
    				$("#outer").rotate({ //inner内部指针转动，outer外部转盘转动
    					duration : 5000, //转动时间 
    					angle : 0, //开始角度 
    					animateTo : 3600 + angle, //转动角度 
    					easing : $.easing.easeOutSine, //动画扩展 
    					callback : function() {
    						var con = confirm('恭喜'+name+'\n'+msg + '\n请截屏保存，留作领奖兑换！');
    						
    					}
    				});
    			}
    		});
    	}
    </script>
    </head>
    
    <body class="activity-lottery-winning">
    	<div style="z-index:9999;position:absolute;top:8px;width:100%;text-align:center;">
    		<p style="color:orange;font-size:1.5em;">软件协会16年圣诞活动抽奖</p>
    	</div>
    	<div class="main">
    	
    
    		<div id="outercont">
    			<div id="outer-cont" style="overflow:hidden;">
    				<div id="outer">
    					<img src="files/activity-lottery-1.png" width="310px">
    				</div>
    			</div>
    			<div id="inner-cont">
    				<div id="inner">
    					<img src="files/activity-lottery-2.png">
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="info">
    		<p>备注:</p>
    		<p class="indent">同IP，姓名只能参加一次！</p>
    		<p class="indent">如果中奖了请把中奖信息截屏，直接发给会长。</p>
    		<p class="indent">一等:10元（最多1人）</p>
    		<p class="indent">二等:5元（最多2人）</p>
    		<p class="indent">三等:1元（人数无上限）</p>
    	</div>
    </body>
    </html>

[SouthEast]: /images/20220713/a64951296dd24e359d671ff26672d951.png
[SouthEast 1]: /images/20220713/a1c1be3be7144ede8b94ac557c1dee37.png