Java+Jquery实现转盘抽奖系统

最新推荐文章于 2021-03-22 03:11:02 发布

竹林幽深

最新推荐文章于 2021-03-22 03:11:02 发布

阅读量696

点赞数

分类专栏： java 文章标签： css javascript java jquery

java 专栏收录该内容

644 篇文章 8 订阅

订阅专栏

原文地址：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

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);
}
}

前台为：

[html] view plain copy

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