用Jsp程序也弄了一个出来，首先是Html的效果，我打算每次在页面上只显示一个金蛋，点击的时候用Ajax提交，Java在后台处理一下返回结果就Ok了。
html页面代码：
<div class="fanzt-egg">
<div class="fanzt-egg-img" data-flag="0" onClick="eggClick(this)">
<img src="images/egg_1.png" id="egg">
</div>
<div class="fanzt-chuizi"><img src="images/img-6.png"></div>
<div class="fanzt-hua"><img src="images/img-4.png"></div>
<div class="fanzt-message"><b>中奖了</b></div>
</div>
css样式：
<style>
body{margin:0px;padding:0px;}
.fanzt-egg{margin:0px;padding:0px; background-color:RGB(221,147,0); position:relative;}
.fanzt-egg .fanzt-egg-img{position:absolute; z-index:9990;}
.fanzt-egg .fanzt-chuizi{ position:absolute; z-index:9991;display:none;-webkit-transform:rotate(5deg); -moz-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg);}
.fanzt-egg .fanzt-hua{ position:absolute; z-index:9991;display:none;
-webkit-transition::all 0.8s ease;-moz-transition::all 0.8s ease;
-o-transition::all 0.8s ease;transition:all 0.8s ease;}
.fanzt-egg .fanzt-message{ position:absolute; z-index:9995;display:none;
width:140px; padding:10px;color:red;text-align:center;
-webkit-transition::all 0.8s ease;-moz-transition::all 0.8s ease;
-o-transition::all 0.8s ease;transition:all 0.8s ease;}
</style>
JavaScript：
<script>
function eggClick(obj){
if($(obj).attr("data-flag")=="0"){
$.post("ser.jsp",{ //要传递的参数
},function(data){
if(data!=null){
$(".fanzt-chuizi").show(); var ctop=$(".fanzt-chuizi").position().top-20; var cleft=$(".fanzt-chuizi").position().left+30; //1.锤子抬起的动作
$(".fanzt-chuizi").animate({"top":ctop+"px","left":cleft+"px"},1500,function(){
//2.锤子抬起达到最顶点的动作
$(".fanzt-chuizi").css(
{ "-webkit-transform":"rotate(80deg)", "-moz-transform":"rotate(80deg)", "-o-transform":"rotate(80deg)", "transform":"rotate(80deg)", "-webkit-transition":"all 0.8s ease", "-moz-transition":"all 0.8s ease", "-o-transition":"all 0.8s ease", "transition":"all 0.8s ease"
}); //3.锤子落下的动作
$(".fanzt-chuizi").animate({"top":(ctop+25)+"px","left":(cleft-50)+"px"},200,function(){
//4.锤子落下到达最低点
$(".fanzt-chuizi").css(
{ "-webkit-transform":"rotate(5deg)", "-moz-transform":"rotate(5deg)", "-o-transform":"rotate(5deg)", "transform":"rotate(5deg)", "-webkit-transition":"all 0.1s ease", "-moz-transition":"all 0.1s ease", "-o-transition":"all 0.1s ease", "transition":"all 0.1s ease"
}); //5.金蛋破碎
$("#egg").attr("src","images/egg_2.png");
$(".fanzt-chuizi").hide(); //6.金花溅出
$(".fanzt-hua").slideDown(200); //7.中奖结果
$(".fanzt-message").show(200);
$(".fanzt-message").find("b").text(data); //8.程序处理
$(obj).attr("data-flag","1");//已砸蛋，不能再砸
});
});
}
});
}
}
$(function(){wh();});
$(window).resize(function(e){wh();}); //控制宽高
function wh(){
var eggh=158; var eggw=187;
$(".fanzt-egg").width($(window).width());
$(".fanzt-egg").height($(window).height());
$(".fanzt-egg-img").css({"top":(($(window).height()-eggh)/2)+"px","left":(($(window).width()-eggw)/2)+"px"});
$(".fanzt-chuizi").css({"top":(($(window).height()-eggh)/2)-15+"px","left":(($(window).width()-eggw)/2)+130+"px"});
$(".fanzt-hua").css({"top":(($(window).height()-eggh)/2-45)+"px","left":(($(window).width()-eggw)/2-30)+"px"});
$(".fanzt-message").css({"top":(($(window).height()-eggh)/2-30)+"px","left":(($(window).width()-eggw)/2)+"px"});
} </script>
Java服务端的代码：
<%@page import="java.io.PrintWriter"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
JSONArray array=getData();
PrintWriter writer=response.getWriter();
JSONObject o=getRand(array);
writer.write(o.getString("prize")+","+o.getString("name"));
writer.flush();
writer.close();
%>
<%! public JSONObject getRand(JSONArray array){
JSONObject o=null; //1.总中奖概率
Integer gjSum=0; for(int i=0;i<array.size();i++){
JSONObject ob=JSONObject.fromObject(array.get(i));
gjSum+=ob.getInt("prob");
} //2.计算概率
for(int i=0;i<array.size();i++){
JSONObject ob=JSONObject.fromObject(array.get(i));
Integer num=(int) (Math.random()*gjSum+1); if(num<=ob.getInt("prob")){
o=ob; break;
}else{
gjSum-=ob.getInt("prob");
}
} return o;
} public JSONArray getData(){
JSONArray array=new JSONArray();
JSONObject object=new JSONObject(); object.put("id", "1"); object.put("prize","一等奖"); object.put("name","Iphone 6S"); object.put("num","1"); object.put("prob","1");
array.add(object); object=new JSONObject(); object.put("id", "2"); object.put("prize","二等奖"); object.put("name","Ipad mini一台"); object.put("num","2"); object.put("prob","2");
array.add(object); object=new JSONObject(); object.put("id", "3"); object.put("prize","三等奖"); object.put("name","128G 金士顿U盘一个"); object.put("num","8"); object.put("prob","5");
array.add(object); object=new JSONObject(); object.put("id", "4"); object.put("prize","四等奖"); object.put("name","爱国者充电宝一个"); object.put("num","10"); object.put("prob","10");
array.add(object); object=new JSONObject(); object.put("id", "5"); object.put("prize","五等奖"); object.put("name","购物优惠券一张"); object.put("num","500"); object.put("prob","79");
array.add(object); return array;
}
%>