jQuery+PHP实现砸金蛋抽奖

Invoker 发布于2019-06-27 15:45 / 2215人阅读

摘要：演示下载地址效果图三个金蛋一把锤子及中奖结果代码如下锤子当鼠标滑向金蛋时，锤子会仅靠金蛋右上方，通过来控制位置。当挥动锤子砸向金蛋前，我们先把金蛋中的数字编号隐藏起来。最后，我们向后台发送一个请求，后台程序会处理奖项分配并把中奖结果返回。

演示下载地址：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...

云服务器专线服务砸金蛋 asp源码砸金蛋 asp 砸金蛋源码 jquery抽奖

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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