【经典案例】基于JQuery+PHP编写砸金蛋中奖程序

原文链接：https://www.webfalse.com/read/201725/1320924.html

首先，先来看看效果图：

1、HTML
我们页面上要展现的是一个砸金蛋的台子，台上放了编号为1，2，3的三个金蛋，以及一把锤子。我们构建以下html代码：

<div class="egg">   
 	<ul class="eggList">   
	 	<p class="hammer" id="hammer">锤子</p>   
	 	<p class="resultTip" id="resultTip"><b id="result"></b></p>   
	 	<li><span>1</span><sup></sup></li>   
	 	<li><span>2</span><sup></sup></li>   
	 	<li><span>3</span><sup></sup></li>   
 	</ul>   
</div>

2、CSS

.egg{width:660px; height:400px; margin:50px auto 20px auto;}   
.egg ul li{z-index:999;list-style-type:none;}   
.eggList{padding-top:110px;position:relative;width:660px;}   
.eggList li{float:left;background:url(images/egg_1.png) no-repeat bottom;width:158px;   
height:187px;cursor:pointer;position:relative;margin-left:35px;}   
.eggList li span{position:absolute; width:30px; height:60px; left:68px; top:64px; color:#ff0;   
 font-size:42px; font-weight:bold}   
.eggList li.curr{background:url(images/egg_2.png) no-repeat bottom;cursor:default;z-index:300;}   
.eggList li.curr sup{position:absolute;background:url(images/img-4.png) no-repeat;width:232px;   
height:181px;top:-36px;left:-34px;z-index:800;}   
.hammer{background:url(images/img-6.png) no-repeat;width:74px;height:87px;position:absolute;   
text-indent:-9999px;z-index:150;left:200px;top:80px;}   
.resultTip{position:absolute; background:#ffc ;width:148px;padding:6px;z-index:500;top:200px;   
left:10px; color:#f60; text-align:center;overflow:hidden;display:none;z-index:500;}   
.resultTip b{font-size:14px;line-height:24px;} 

3、jQuery
接下来，我们用jQuery代码来实现砸金蛋、碎蛋、展示中奖结果的整个过程（必须先载入jQuery库文件）。
首先，实现鼠标放在哪个金蛋上锤子就会跟着到那个金蛋的上方，可以使用position()来定位。

$(".eggList li").hover(function() {   
 	var posL = $(this).position().left + $(this).width();  
 	$("#hammer").show().css('left', posL);   
})

然后，点击金蛋，在click中先把金蛋中的编号数字隐藏，然后调用自定义函数eggClick()。

$(".eggList li").click(function() {   
 	$(this).children("span").hide();   
 	eggClick($(this));   
});

最后，在自定义函数eggClick()中，我们使用jQuery的$.getJSON方法向后台data.php发送一个ajax请求，后台php程序会处理奖项分配并把中奖结果返回。自定义函数eggClick() 的代码：

function eggClick(obj) {   
 	var _this = obj;   
 	$.getJSON("data.php",function(res){//ajax请求   
 		_this.unbind('click'); //解除click   
 		$(".hammer").css({"top":_this.position().top-55,"left":_this.position().left+185});   
 		$(".hammer").animate({//锤子动画   
 		"top":_this.position().top-25,   
 		"left":_this.position().left+125   
	 	},30,function(){   
	 		_this.addClass("curr"); //蛋碎效果   
	 		_this.find("sup").show(); //金花四溅   
	 		$(".hammer").hide();//隐藏锤子   
	 		$('.resultTip').css({display:'block',top:'100px',left:_this.position().   
	 		left+45,opacity:0}).animate({top: '50px',opacity:1},300,function(){//中奖结果动画
		  		if(res.msg==1){//返回结果   
		  			$("#result").html("恭喜，您中得"+res.prize+"!");   
		  		}else{   
		  			$("#result").html("很遗憾,您没能中奖!");   
		  		}   
	 		});   
	 	});   
 	});   
}

4、PHP
data.php处理前端发送的ajax请求，使用概率算法，根据设置好的中奖概率，将中奖结果以json的格式输出。其代码如下：

<?php
$prize_arr = array(   
 '0' => array('id'=>1,'prize'=>'平板电脑','v'=>3),   
 '1' => array('id'=>2,'prize'=>'数码相机','v'=>5),   
 '2' => array('id'=>3,'prize'=>'音箱设备','v'=>10),   
 '3' => array('id'=>4,'prize'=>'4G优盘','v'=>12),   
 '4' => array('id'=>5,'prize'=>'Q币10元','v'=>20),   
 '5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>50),   
);   
foreach ($prize_arr as $key => $val) {   
 	$arr[$val['id']] = $val['v'];   
}   
$rid = getRand($arr); // 根据概率获取奖项id   
$res['msg'] = ($rid==6)?0:1; // 如果为0则没中   
$res['prize'] = $prize_arr[$rid-1]['prize']; // 中奖项   
echo json_encode($res);   
// 计算概率   
function getRand($proArr) {   
 	$result = '';   
 	//概率数组的总概率精度   
 	$proSum = array_sum($proArr);   
 	//概率数组循环   
 	foreach ($proArr as $key => $proCur) {   
 		$randNum = mt_rand(1, $proSum);   
 		if ($randNum <= $proCur) {   
 			$result = $key;   
 			break;   
	 	} else {   
	 		$proSum -= $proCur;   
	 	}   
 	}   
 	unset ($proArr);   
 	return $result;   
}