《PHP學(xué)習(xí):基于JQuery+PHP編寫砸金蛋中獎(jiǎng)程序》要點(diǎn):
本文介紹了PHP學(xué)習(xí):基于JQuery+PHP編寫砸金蛋中獎(jiǎng)程序,希望對(duì)您有用。如果有疑問,可以聯(lián)系我們。
PHP編程首先給大家展示效果圖:
PHP編程
PHP編程查看演示 下載源碼
PHP編程準(zhǔn)備工作
PHP編程我們需要準(zhǔn)備道具(素材),即相關(guān)圖片,包含金蛋圖片、蛋砸碎后的圖片、砸碎后的碎花圖片、以及錘子圖片.
PHP編程HTML
PHP編程我們頁面上要展現(xiàn)的是一個(gè)砸金蛋的臺(tái)子,臺(tái)上放了編號(hào)為1,2,3的三個(gè)金蛋,以及一把錘子.我們構(gòu)建以下html代碼:
PHP編程
<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>
PHP編程上述代碼中,.hammer放置錘子,.resultTip用于砸蛋后顯示的結(jié)果,即有沒有中獎(jiǎng),三個(gè)li分別放置3個(gè)金蛋,我們用CSS來裝飾下效果.
PHP編程CSS
PHP編程
.egg{width:660px; height:400px; margin:50px auto 20px auto;}
.egg ul li{z-index:999;}
.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:168px;top:100px;}
.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;}
PHP編程依照上面的代碼我們可以在頁面中看到一個(gè)完整的砸金蛋場(chǎng)景,注意我們使用了png圖片,如果你的客戶仍在使用ie6的話,你可能需要對(duì)png圖片的透明做處理,本文不做處理.
PHP編程jQuery
PHP編程接下來,我們要用jQuery代碼來實(shí)現(xiàn)砸金蛋、碎蛋、展示中獎(jiǎng)結(jié)果的整個(gè)過程.當(dāng)然,老規(guī)矩,對(duì)于才用jQuery實(shí)現(xiàn)的實(shí)例程序,你必需先載入jQuery庫(kù)文件.
PHP編程首先,當(dāng)鼠標(biāo)滑向金蛋時(shí),用于砸金蛋的錘子會(huì)僅靠金蛋右上方,可以使用position()來定位.
PHP編程
$(".eggList li").hover(function() {
var posL = $(this).position().left + $(this).width();
$("#hammer").show().css('left', posL);
})
PHP編程然后,點(diǎn)擊金蛋,即揮動(dòng)錘子砸向金蛋的過程.我們?cè)赾lick中先把金蛋中的編號(hào)數(shù)字暗藏,然后調(diào)用自定義函數(shù)eggClick().
PHP編程
$(".eggList li").click(function() {
$(this).children("span").hide();
eggClick($(this));
});
PHP編程最后,在自定義函數(shù)eggClick()中,我們使用jQuery的$.getJSON方法向后臺(tái)data.php發(fā)送一個(gè)ajax哀求,后臺(tái)php程序會(huì)處理獎(jiǎng)項(xiàng)分配并把中獎(jiǎng)結(jié)果返回.我們使用animate()來實(shí)現(xiàn)砸錘子的動(dòng)畫,通過改變錘子的top和left位子來實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果,錘子砸下去后,金蛋樣式變?yōu)?curr,同時(shí)金花四濺,然后中獎(jiǎng)結(jié)果.resultTip展示,有沒有中獎(jiǎng)要看你的運(yùn)氣和后臺(tái)獎(jiǎng)項(xiàng)設(shè)置的中獎(jiǎng)幾率了.來看砸金蛋函數(shù)eggClick()的代碼:
PHP編程
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({//錘子動(dòng)畫
"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(){//中獎(jiǎng)結(jié)果動(dòng)畫
if(res.msg==1){//返回結(jié)果
$("#result").html("恭喜,您中得"+res.prize+"!");
}else{
$("#result").html("很遺憾,您沒能中獎(jiǎng)!");
}
});
}
);
});
}
PHP編程為了將砸金蛋程序更真實(shí)的結(jié)合到你的網(wǎng)站中,你可以在砸蛋前驗(yàn)證會(huì)員身份,限制砸蛋次數(shù)、砸蛋中獎(jiǎng)后留下聯(lián)系方式等等措施,具體看網(wǎng)站需求了.
PHP編程PHP
PHP編程data.php處理前端發(fā)送的ajax哀求,我們才用概率算法,根據(jù)設(shè)置好的中獎(jiǎng)概率,將中獎(jiǎng)結(jié)果以json的格式輸出.關(guān)于概率計(jì)算的例子可以參照:PHP+jQuery實(shí)現(xiàn)翻板抽獎(jiǎng)
PHP編程
$prize_arr = array(
'0' => array('id'=>1,'prize'=>'平板電腦','v'=>3),
'1' => array('id'=>2,'prize'=>'數(shù)碼相機(jī)','v'=>5),
'2' => array('id'=>3,'prize'=>'音箱設(shè)備','v'=>10),
'3' => array('id'=>4,'prize'=>'4G優(yōu)盤','v'=>12),
'4' => array('id'=>5,'prize'=>'Q幣10元','v'=>20),
'5' => array('id'=>6,'prize'=>'下次沒準(zhǔn)就能中哦','v'=>50),
);
foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v'];
}
$rid = getRand($arr); //根據(jù)概率獲取獎(jiǎng)項(xiàng)id
$res['msg'] = ($rid==6)?0:1; //如果為0則沒中
$res['prize'] = $prize_arr[$rid-1]['prize']; //中獎(jiǎng)項(xiàng)
echo json_encode($res);
//計(jì)算概率
function getRand($proArr) {
$result = '';
//概率數(shù)組的總概率精度
$proSum = array_sum($proArr);
//概率數(shù)組循環(huán)
foreach ($proArr as $key => $proCur) {
$randNum = mt_rand(1, $proSum);
if ($randNum <= $proCur) {
$result = $key;
break;
} else {
$proSum -= $proCur;
}
}
unset ($proArr);
return $result;
}
PHP編程通過設(shè)置概率,我們可以看出,砸中平板電腦的幾率占3%,砸不中的幾率占50%,點(diǎn)擊演示demo來嘗嘗你的運(yùn)氣吧.
歡迎參與《PHP學(xué)習(xí):基于JQuery+PHP編寫砸金蛋中獎(jiǎng)程序》討論,分享您的想法,維易PHP學(xué)院為您提供專業(yè)教程。
轉(zhuǎn)載請(qǐng)注明本頁網(wǎng)址:
http://www.snjht.com/jiaocheng/8748.html