27
2018
03

Java+Jquery实现转盘抽奖系统

抽奖系统,是一种大转盘抽奖的。效果图如下:




这个基于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">

<!-- <script type="text/javascript">

var loadingObj = new loading(document.getElementById('loading'), {

radius : 20,

circleLineWidth : 8

});

loadingObj.show();

</script> -->


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



上一篇:Libgdx Polygon多边形碰撞检测 下一篇:Javascript中数组重排序sort方法