檢視演示 **原始碼
準備工作
我們需要準備道具（素材），即相關，包括金蛋、蛋砸碎後的、砸碎後的碎花、以及錘子。
html
我們頁面上要展現的是乙個砸金蛋的台子，台上放了編號為1，2，3的三個金蛋，以及一把錘子。我們構建以下html**： 錘子
上述**中，.hammer放置錘子，.resulttip用於砸蛋後顯示的結果，即有沒有中獎，三個li分別放置3個金蛋，我們用css來裝飾下效果。
css.egg
.egg ul li
.egglist
.egglist li
.egglist li span
.egglist li.curr
.egglist li.curr sup
.hammer
.resulttip
.resulttip b
按照上面的**我們可以在頁面中看到乙個完整的砸金蛋場景，注意我們使用了png，如果你的客戶仍在使用ie6的話，你可能需要對png的透明做處理，本文不做處理。
jquery
接下來，我們要用jquery**來實現砸金蛋、碎蛋、展示中獎結果的整個過程。當然，老規矩，對於才用jquery實現的例項程式，你必須先載入jquery庫檔案。
首先，當滑鼠滑向金蛋時，用於砸金蛋的錘子會僅靠金蛋右上方，可以使用position()來定位。
$(".egglist li").hover(function() )
然後，點選金蛋，即揮動錘子砸向金蛋的過程。我們在click中先把金蛋中的編號數字隱藏，然後呼叫自定義函式eggclick()。
$(".egglist li").click(function() );
最後，在自定義函式eggclick()中，我們使用jquery的$.getjson方法向後台data.php傳送乙個ajax請求，後台php程式會處理獎項分配mzghp並把中獎結果返回。我們使用animate()來實現砸錘子的動畫，通過改變錘子的top和left位子來實現簡單的動畫效果，錘子砸下去後，金蛋樣式變為.curr，同時金花四濺，然後中獎結果.resulttip展示，有沒有中獎要看你的運氣和後台獎項設定的中獎機率了。來看砸金蛋函式eggclick()的**：
function eggclick(obj) );
$(".hammer").animate(,30,function())
.animate(,300,function()else
});
} );
});
}為了將砸金蛋程式更真實的結合到你的**中，你可以在砸蛋前驗證會員身份，限制砸蛋次數、砸蛋中獎後留下****等等措施，具體看**需求了。
phpdata.php處理前端傳送的ajax請求，我們才用概率演算法，根據設定好的中獎概率，將中獎結果以json的格式輸出。關於概率計算的例子可以參照：php+jquery實現翻板**
$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)
$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) else
} unset ($proarr);
return $result;
}通過設定概率，我們可以看出，砸中平板電腦的機率佔3%，砸不中的機率佔50%，點選演示demo來試試你的運氣吧。
本文標題: 基於jquery+php編寫砸金蛋中獎程式
本文位址:
基於jQuery編寫外掛程式
寫在前面 相信很多使用過框架的人都不會再想著用jquery庫去找選擇器，對dom樹進行複雜的操作了吧，但是用jquery去擴充套件外掛程式和方法還是很有用途的，最起碼對自己的程式設計基礎還是很有用的，jquery庫相對穩定，自己擴充套件出來的方法或函式方便後期維護和提高自己的開發效率。1.我們最常接...
基於Scrapy框架編寫爬蟲專案
知識點 2種安裝模組的方式。以下兩種方式可以安裝絕大部分模組，網路安裝 指直接在控制台 pip install xx 第6條，配置過程 1.複製 f 程式設計 python lib site packages pywin32 system32 下的兩個.dll檔案 2.貼上到 c windows s...
Shell基於case分支編寫指令碼
本案例要求編寫test.sh指令碼，相關要求如下 能使用redhat fedora控制引數 控制引數通過位置變數 1傳入 當使用者輸入redhat引數，指令碼返回fedora 當使用者輸入fedora引數，指令碼返回redhat 當使用者輸入其他引數，則提示錯誤資訊 case分支屬於匹配執行的方式，...