思路：網(wǎng)頁(yè)上添加生成隨機(jī)數(shù)的顯示效果譬嚣，從后臺(tái)生成兩個(gè)真正的隨機(jī)數(shù)，通過(guò)ajax請(qǐng)求獲取，然后顯示在頁(yè)面上
luckdraw.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp" %>
<html>
<head>
<title>抽獎(jiǎng)</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異步請(qǐng)求數(shù)據(jù)
$.post(url,opt,function(res){
one = res.one;
second = res.second;
beginRndNum(one,second);
}）
}
</script>
</html>
引入的script1.js文件，jquery那個(gè)文件自己在網(wǎng)上下載
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();
}
>后臺(tái)生成隨機(jī)數(shù)類(lèi)
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++) {
// 調(diào)用Math.random()方法
int num = (int) (Math.random() * (max - min)) + min;
set.add(num);// 將不同的數(shù)存入HashSet中
}
int setSize = set.size();
// 如果存入的數(shù)小于指定生成的個(gè)數(shù)颗管，則調(diào)用遞歸再生成剩余個(gè)數(shù)的隨機(jī)數(shù)，如此循環(huán)滓走，直到達(dá)到指定大小
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;
}
}
最后剩下的就是數(shù)據(jù)的傳輸垦江，根據(jù)你自己用的框架的特性，那數(shù)據(jù)傳到相應(yīng)位置就可以使用了
