jQuery+PHP實(shí)現(xiàn)砸金蛋抽獎(jiǎng)

kaka 發(fā)布于2019-08-20 15:06 / 3446人閱讀

摘要：演示下載地址效果圖三個(gè)金蛋一把錘子及中獎(jiǎng)結(jié)果代碼如下錘子當(dāng)鼠標(biāo)滑向金蛋時(shí)，錘子會(huì)僅靠金蛋右上方，通過(guò)來(lái)控制位置。當(dāng)揮動(dòng)錘子砸向金蛋前，我們先把金蛋中的數(shù)字編號(hào)隱藏起來(lái)。最后，我們向后臺(tái)發(fā)送一個(gè)請(qǐng)求，后臺(tái)程序會(huì)處理獎(jiǎng)項(xiàng)分配并把中獎(jiǎng)結(jié)果返回。

演示下載地址：http://www.erdangjiade.com/js...
效果圖：

三個(gè)金蛋、一把錘子及中獎(jiǎng)結(jié)果#result_tip代碼如下：

錘子

1 2 3

jQuery

1、當(dāng)鼠標(biāo)滑向金蛋時(shí)，錘子會(huì)僅靠金蛋右上方，通過(guò)position()來(lái)控制位置。

$(".egg_list li").hover(function() {

var position_left = $(this).position().left + $(this).width(); 
$("#hammer").show().css("left", position_left); 

})

當(dāng)揮動(dòng)錘子砸向金蛋eggClick()前，我們先把金蛋中的數(shù)字編號(hào)隱藏起來(lái)。

$(".eggList li").click(function() {

$(this).children("span").hide();  
eggClick($(this));  

});

最后，我們向后臺(tái)ajax.php發(fā)送一個(gè)ajax請(qǐng)求，后臺(tái)php程序會(huì)處理獎(jiǎng)項(xiàng)分配并把中獎(jiǎng)結(jié)果返回。我們使用animate()來(lái)實(shí)現(xiàn)砸錘子的動(dòng)畫(huà)，通過(guò)改變錘子的top和left位子來(lái)實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果，錘子砸下去后，金蛋樣式變?yōu)?curruent，同時(shí)金花四濺，最后展現(xiàn)中獎(jiǎng)結(jié)果，我們看下砸蛋的eggClick方法：

function eggClick(obj) {

$.get("ajax.php",function(data) { 
    if (obj.hasClass("current")) { 
        alert("蛋都碎了一地，刷新重新來(lái)過(guò)吧！"); 
        return false; 
    } 
    $(".hammer").css({ 
        "top": obj.position().top - 55, 
        "left": obj.position().left + 185 
    }); 
    $(".hammer").animate({ 
        "top": obj.position().top - 25, 
        "left": obj.position().left + 125 
    },30, function() { 
        obj.addClass("current"); //蛋碎效果 
        obj.find("sup").show(); //金花四濺 
        $(".hammer").hide(); 
        $(".result_tip").css({ 
            display: "block", 
            top: "100px", 
            left: obj.position().left + 45, 
            opacity: 0 
        }).animate({ 
            top: "50px", 
            opacity: 1 
        }, 
        300, 
        function() { 
            if (data.msg == 1) { 
                $("#result").html("恭喜您中得" + data.prize_title + "！"); 
            } else { 
                $("#result").html("Sorry,您沒(méi)能中獎(jiǎng)!"); 
            } 
        }); 
    }); 
}, 
"json") 

}

最后我們看下ajax.php中獎(jiǎng)項(xiàng)設(shè)置和計(jì)算中獎(jiǎng)概率算法。

$prize_arr = array(

"0" => array("id" => 1, "title" => "iphone5s", "v" => 5), 
"1" => array("id" => 2, "title" => "聯(lián)系筆記本", "v" => 10), 
"2" => array("id" => 3, "title" => "音箱設(shè)備", "v" => 20), 
"3" => array("id" => 4, "title" => "30GU盤(pán)", "v" => 30), 
"4" => array("id" => 5, "title" => "話費(fèi)50元", "v" => 10), 
"5" => array("id" => 6, "title" => "iphone6s", "v" => 15), 
"6" => array("id" => 7, "title" => "謝謝，繼續(xù)加油哦！~", "v" => 10), 

);

foreach ($prize_arr as $key => $val) {

$arr[$val["id"]] = $val["v"]; 

}

$prize_id = getRand($arr); //根據(jù)概率獲取獎(jiǎng)品id
$data["msg"] = ($prize_id == 7) ? 0 : 1; //如果為0則沒(méi)中
$data["prize_title"] = $prize_arr[$prize_id - 1]["title"]; //中獎(jiǎng)獎(jiǎng)品
echo json_encode($data);
exit; //以json數(shù)組返回給前端

function getRand($proArr) { //計(jì)算中獎(jiǎng)概率

$rs = ""; //z中獎(jiǎng)結(jié)果 
$proSum = array_sum($proArr); //概率數(shù)組的總概率精度 
//概率數(shù)組循環(huán) 
foreach ($proArr as $key => $proCur) { 
    $randNum = mt_rand(1, $proSum); 
    if ($randNum <= $proCur) { 
        $rs = $key; 
        break; 
    } else { 
        $proSum -= $proCur; 
    } 
} 
unset($proArr); 
return $rs; 

}

通過(guò)ajax.php，我們可以看出共設(shè)置了7個(gè)獎(jiǎng)項(xiàng)并設(shè)置了中獎(jiǎng)概率，比如砸中”iphone5s“的幾率占5%，砸不中的幾率占10%，點(diǎn)擊演示砸金蛋demo來(lái)試試你的運(yùn)氣吧。
演示下載地址：http://www.erdangjiade.com/js...

云服務(wù)器 GPU云服務(wù)器砸金蛋 asp源碼砸金蛋 asp 砸金蛋源碼 jquery抽獎(jiǎng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/81993.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

kaka

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Linux——Linux驅(qū)動(dòng)之字符類(lèi)設(shè)備驅(qū)動(dòng)編寫(xiě)實(shí)踐，從0到1手把手教你字符類(lèi)設(shè)備如何申請(qǐng)?jiān)O(shè)備號(hào)，如

閱讀 822·2021-10-13 09:39
java中int、double、char等變量的取值范圍

閱讀 3701·2021-10-12 10:12
NameSilo：注冊(cè)局[Verisign]宣布.com域名自2021年9月1日起漲價(jià)

閱讀 1753·2021-08-13 15:07
JS基礎(chǔ)入門(mén)篇（十三）—定時(shí)器

閱讀 1012·2019-08-29 15:31
React setState 源碼解析

閱讀 2888·2019-08-26 13:25
平時(shí)工作和學(xué)習(xí)中總結(jié)的一些知識(shí)點(diǎn)(1)

閱讀 1783·2019-08-23 18:38
JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法之美 - 線性表（數(shù)組、棧、隊(duì)列、鏈表）

閱讀 1885·2019-08-23 18:25
前端知識(shí)匯總

閱讀 1862·2019-08-23 17:20

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

jQuery+PHP實(shí)現(xiàn)砸金蛋抽獎(jiǎng)

相關(guān)文章