jQuery+PHP實現砸金蛋抽獎

Invoker 發布于2019-06-27 15:45 / 2420人閱讀

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

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

三個金蛋、一把錘子及中獎結果#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()前，我們先把金蛋中的數字編號隱藏起來。

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

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

});

最后，我們向后臺ajax.php發送一個ajax請求，后臺php程序會處理獎項分配并把中獎結果返回。我們使用animate()來實現砸錘子的動畫，通過改變錘子的top和left位子來實現簡單的動畫效果，錘子砸下去后，金蛋樣式變為.curruent，同時金花四濺，最后展現中獎結果，我們看下砸蛋的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中獎項設置和計算中獎概率算法。

$prize_arr = array(

"0" => array("id" => 1, "title" => "iphone5s", "v" => 5), 
"1" => array("id" => 2, "title" => "聯系筆記本", "v" => 10), 
"2" => array("id" => 3, "title" => "音箱設備", "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" => "謝謝，繼續加油哦！~", "v" => 10), 

);

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

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

}

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

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

$rs = ""; //z中獎結果 
$proSum = array_sum($proArr); //概率數組的總概率精度 
//概率數組循環 
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，我們可以看出共設置了7個獎項并設置了中獎概率，比如砸中”iphone5s“的幾率占5%，砸不中的幾率占10%，點擊演示砸金蛋demo來試試你的運氣吧。
演示下載地址：http://www.erdangjiade.com/js...

GPU云服務器云服務器砸金蛋 asp源碼砸金蛋 asp 砸金蛋源碼 jquery抽獎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/22530.html

jQuery+PHP實現砸金蛋抽獎

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

kaka 2019-08-20 15:06 評論0 收藏0
jQuery+PHP實現砸金蛋抽獎

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

genedna 2019-08-14 17:47 評論0 收藏0
jQuery+PHP實現砸金蛋抽獎

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

Alliot 2019-08-01 16:29 評論0 收藏0
八年phper的高級工程師面試之路

摘要：它們的用處都是用來能讓數據正常插入到數據庫中，并防止注入，但是并不能做到防止注入。進來抽獎的用戶使用原子加鎖，實現抽獎次數自增，當抽獎次數到達時，返回不中獎。轉載于：https://zhuanlan.zhihu.com/p/...答案并非標準，是作者經驗之談，僅供參考 mysql_real_escape_string mysql_escape_string有什么本質的區別，有什么用處...

韓冰 2019-06-27 16:51 評論0 收藏0