Java+Jquery實現轉盤抽獎系統

阿新 • • 發佈：2019-01-18

今天平安夜，協會需要做活動，第一個活動就是在群裡發紅包，第二個就是進協會網站的抽獎系統進行抽獎。

由於需要，所以我零時做了一個抽獎系統，是一種大轉盤抽獎的。效果圖如下：

這個基於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>

Java+Jquery實現轉盤抽獎系統

今天平安夜，協會需要做活動，第一個活動就是在群裡發紅包，第二個就是進協會網站的抽獎系統進行抽獎。由於需要，所以我零時做了一個抽獎系統，是一種大轉盤抽獎的。效果圖如下：這個基於Java抽獎的幸運大轉盤抽獎系統是和微信的有點像，改編自一個網友的程式碼。前臺大概就是h

jquery.rotate外掛實現轉盤抽獎示例

css程式碼：.draw-out{width:400px;height:400px;margin:30px auto;position:relative} .draw-bottom{width:400px;height:400px;position:relative}

Java+Jquery實現批量下載圖片實戰

Web端的批量下載圖片實戰因為客戶提需求必須要圖片的批量下載功能，只能硬著頭皮做，公司還沒有前端，好吧…前後端一條龍操作。畢竟第一次做批量下載圖片，懵逼在所難免，整整花了3天，走了不少彎路，一定要記錄下來。首先，如何實現批量下載功能。我的第一反應就是，獲取一堆Id然

Quartz+JAVA+Servlet實現任務排程系統（簡潔）

1.開發環境 tomcat8.5，Jdk1.8，maven ；技術：java ,quartz,servlet(為了簡便) 2.該系統使用場景： `在12306上買了一張火車票，30分鐘內需要支付（需要新增一個倒計時），30分鐘還沒有支付就請求取消訂單的介

jquery實現數字抽獎（版本1）

實現數字抽獎，首先給使用者一個設定抽獎個數和抽獎數字範圍的設定頁面 STEP1：【HTML+Jquery程式碼】此處需要用到jquery實現頁面的跳轉和引數傳遞 location.href = "/group/tool/choujiang?num="+num+"&

Java swing實現圖書管理系統（高階版）

大家好，今天給大家演示一下由Java swing實現的圖書管理系統，此前給大家演示過一個版本，這個版本作為升級版，比上一個版本功能複雜了不少，這個版本環境還是跟上一個一樣，jdk版本不限，資料庫為mysql，可匯入到eclipse或myeclipse裡執行，下面我們來演示執行

使用Struts2和jQuery EasyUI實現簡單CRUD系統（五）——jsp,json,EasyUI的結合

元素 word cli resultset sheet 傳輸 charset {} tco 這部分比較復雜，之前看過自己的同學開發一個選課系統的時候用到了JSON，可是一直不知道有什麽用。寫東西也沒用到。所以沒去學他。然後如今以這樣的懷著好奇心，這是做什麽用的，這是怎麽用

jquery----抽獎系統

rip play nth lock display parseint align src spa 1、效果 2、html代碼 <!DOCTYPE html> <html> <head> <meta charset="u

js實現遊戲轉盤抽獎

document .cn itl interval 空格 device max floor star <!DOCTYPE html> <html> <head> <title>js抽獎</title>

Java API實現Hadoop文件系統增刪改查

代碼實現 java api cee 其他 mon prop com null -c Java API實現Hadoop文件系統增刪改查 Hadoop文件系統可以通過shell命令hadoop fs -xx進行操作，同時也提供了Java編程接口 maven配置 <proj

Java Swing 實現系統托盤圖標

bubuko alt 匹配 fig ons 參數 mage 彈出 con 在實現托盤圖標時，出現彈出式菜單顯示中文亂碼，無法顯示正確的文字查詢相關資料後發現是字符編碼不匹配，查詢資料出處解決方法 1、通過修改Java項目的默認編碼為GBK； 2、在Run Configu

PHP實現大轉盤抽獎演算法例項

本文主要向大家介紹了PHP語言實現大轉盤抽獎演算法，通過具體的例項向大家展示，希望對大家學習PHP抽獎有所幫助。流程：1.拼裝獎項陣列，2.計算概率，3.返回中獎情況程式碼如下：中獎概率 ' v ' 可以在後臺設定，傳到此方法中，注意傳整數 1 function get_gift(){ 2

SpringBoot實現Java高併發秒殺系統之併發優化

秒殺系統架構的設計和優化分析，以我一個小菜雞，目前是說不出來的o(╥﹏╥)o。因此呢，我這裡僅從本專案已經實現的優化來介紹一下：本專案中做到了以下優化：秒殺介面採用md5加密方式防刷。訂單表使用聯合主鍵方式，限制一個使用者只能購買該商品一次。配合Spring事務

Java實現註冊登入系統——基於Java Swing實現

技術簡介：Java Swing 介紹 Swing 是一個為Java設計的GUI工具包。 Swing是JAVA基礎類的一部分。 Swing包括了圖形使用者介面（GUI）器件如：文字框，按鈕，分隔窗格和表。 Swing提供許多比AWT更好的螢幕顯示元素。它們用純Java寫成，所以同J

JAVA基於權重的抽獎權重隨機演算法的java實現

https://www.bbsmax.com/A/LPdo4pk2z3/ https://blog.csdn.net/huyuyang6688/article/details/50480687

用JAVA和Jquery實現掃碼登入的原理和程式碼

貼上前端程式碼,供參考 <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jq

Android轉盤抽獎的簡單實現

public class ZhuanPan2 extends View implements View.OnClickListener{ private Paint mPaint; private int mwidth; private int mpidding; p

簡單的抽獎系統實現

需求|原因朋友突然給我一個抽獎的一個需求，讓我幫他他分析下，需求大致是這樣的。 1.發起一個抽象活動，選擇幾種商品作為這個活動的獎品。 2.商品的資訊都已經設定好，名稱、數量、單個獎品中獎率（儲存整數，以萬計。比如存的1，中獎率就是萬分之一。） 3.實現使用者抽獎，並給出是否中

用CSS實現一個抽獎轉盤

效果基本是用CSS實現的，沒有用圖片，加一丟丟JS。完全沒有考慮相容性。首先畫一個轉盤， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

Java網上書店(圖書)管理系統的設計與實現

網上書店管理系統功能模組劃分根據需求分析與系統功能設計目標，結合實際情況本系統功能模組設計分為如下幾個模組： 1．主頁：在這裡我們可以看見本系統的主要功能和資訊。 2．使用者註冊：在這裡我們可以註冊我們的基本資訊，其中電話和Email是比較重要的，因為我們需要對這些資訊進

Java+Jquery實現轉盤抽獎系統

相關推薦