基于网页的一个抽奖程序
2016-06-23 本文已影响922人
薛云龙
思路：网页上添加生成随机数的显示效果，从后台生成两个真正的随机数，通过ajax请求获取，然后显示在页面上
luckdraw.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp" %>
<html>
<head>
<title>抽奖</title>
<script type="text/javascript" src="${path}/public/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${path}/public/js/script1.js"></script>
</head>
<style>
#img2{
position:absolute;
top:43%;
left:10%;
width:19%;
height:28%;
}
#layer3{
top:44%;
left:36%;
width: 30%;
height: 12%;
}
#ResultNum{
font-size:50pt;
font-family:Verdana;
}
#ResultNum1{
font-size:50pt;
font-family:Verdana;
}
</style>
<body scroll=no>
<div id="Layer1" style="position:absolute; width: 100%; height:100%; z-index:-1">
<img src="/public/img/luckDraw.png" height="100%" width="100%">
</div>
<div id="Layer2" style="position:absolute; width: 100%; height:100%;" >
<img alt="" src="${path}/public/img/luckDraw_button.png" id="img2" onclick="luckDraw(this)">
</button>
</div>
<div id="Layer3" style="position:absolute;">
<div id="Resul" style="margin:0 auto;text-align:center;background:#efe;width: 100%;height: 100%;border: solid 2px #ffffff">
<div id="Result" style="color:#40AA53">
<span id="ResultNum">0</span>
</div>
</div>
<div style="height: 20%"></div>
<div id="Resul1" style="margin:0 auto;text-align:center;background:#efe;width: 100%;height: 100%;border: solid 2px #ffffff">
<div id="Result1" style="color:#40AA53">
<span id="ResultNum1">0</span>
</div>
</div>
</div>
</body>
<script>
var g_Timer;
var running = false;
var g_Interval = 1;
var one;
var second;
function luckDraw() {
var url ="${path}/home/luckDraw";
var opt = {};
//ajax异步请求数据
$.post(url,opt,function(res){
one = res.one;
second = res.second;
beginRndNum(one,second);
}）
}
</script>
</html>
引入的script1.js文件，jquery那个文件自己在网上下载
var g_Timer;
var running = false;
function beginRndNum(one,second){
if(running){
running = false;
clearTimeout(g_Timer);
$('#ResultNum').css('color','red');
$('#ResultNum1').css('color','red');
$('#ResultNum').html(one);
$('#ResultNum1').html(second);
document.getElementById("img2").src="/public/img/luckDraw_button.png";
}
else{
running = true;
$('#ResultNum').css('color','black');
$('#ResultNum1').css('color','black');
document.getElementById("img2").src="/public/img/luckDraw_button2.png";
beginTimer();
}
}
function updateRndNum(){
var num = Math.floor(Math.random()*g_PersonCount+1);
$('#ResultNum').html(num);
$('#ResultNum1').html(num);
}
function beginTimer(){
g_Timer = setTimeout(beat, g_Interval);
}
function beat() {
g_Timer = setTimeout(beat, g_Interval);
updateRndNum();
}
>后台生成随机数类
public class RandomNumber {
public HashSet<Integer> set = new HashSet<>();
public RandomNumber() {
}
public static void randomSet(int min, int max, int n, HashSet<Integer> set) {
if (n > (max - min + 1) || max < min) {
return;
}
for (int i = 0; i < n; i++) {
// 调用Math.random()方法
int num = (int) (Math.random() * (max - min)) + min;
set.add(num);// 将不同的数存入HashSet中
}
int setSize = set.size();
// 如果存入的数小于指定生成的个数，则调用递归再生成剩余个数的随机数，如此循环，直到达到指定大小
if (setSize < n) {
randomSet(min, max, n - setSize, set);// 递归
}
}
public HashSet<Integer> getRandomSet(int min, int max, int n){
randomSet(min,max,n,set);
return set;
}
}
最后剩下的就是数据的传输，根据你自己用的框架的特性，那数据传到相应位置就可以使用了
