之前在网上找到了一个Jquery+PHP实现的砸金蛋的例子,正好公司也要我写一个类似的砸金蛋的功能,于是在网上找了找参考,用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;
}
%>
本文例子下载:http://pan.baidu.com/s/1o7PuPb8
PHP的例子另请参考:http://www.5icool.org/a/201308/a2234.html