jQuery+PHP實現(xiàn)砸金蛋抽獎

Alliot 發(fā)布于2019-08-01 16:29 / 3407人閱讀

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

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

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

錘子

1 2 3

jQuery

1、當鼠標滑向金蛋時，錘子會僅靠金蛋右上方，通過position()來控制位置。

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

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

})

當揮動錘子砸向金蛋eggClick()前，我們先把金蛋中的數(shù)字編號隱藏起來。

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

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

});

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

function eggClick(obj) {

$.get("ajax.php",function(data) { 
    if (obj.hasClass("current")) { 
        alert("蛋都碎了一地，刷新重新來過吧！"); 
        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,您沒能中獎!"); 
            } 
        }); 
    }); 
}, 
"json") 

}

最后我們看下ajax.php中獎項設(shè)置和計算中獎概率算法。

$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盤", "v" => 30), 
"4" => array("id" => 5, "title" => "話費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ù)概率獲取獎品id
$data["msg"] = ($prize_id == 7) ? 0 : 1; //如果為0則沒中
$data["prize_title"] = $prize_arr[$prize_id - 1]["title"]; //中獎獎品
echo json_encode($data);
exit; //以json數(shù)組返回給前端

function getRand($proArr) { //計算中獎概率

$rs = ""; //z中獎結(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; 

}

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50553.html

發(fā)表評論

登陸后可評論

0條評論

Alliot

男|高級講師

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

TA的文章

虛擬主機如何實現(xiàn)php偽靜態(tài)設(shè)置-如何配置虛擬主機？

閱讀 3425·2021-09-22 16:00
10gbiz：香港/洛杉磯CN2 GIA線路VPS四折$2.36/月起,香港/日本獨立服務(wù)器首月1.

閱讀 3468·2021-09-07 10:26
margin合并、塌陷，清除浮動

閱讀 3029·2019-08-30 15:55
我的全棧工程師之旅（一）

閱讀 2869·2019-08-30 13:48
json和xml的區(qū)別

閱讀 1376·2019-08-30 12:58
IphoneX底部適配

閱讀 2178·2019-08-30 11:15
使用html2canvas.js實現(xiàn)功能中遇到的一些問題

閱讀 958·2019-08-30 11:08
rem兩三事

閱讀 534·2019-08-29 18:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

jQuery+PHP實現(xiàn)砸金蛋抽獎

相關(guān)文章