用Java和Jquery實現了一個砸金蛋例子
阿新 • • 發佈：2019-02-04
之前在網上找到了一個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" css樣式：
<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;
}
%>