当前位置: 首页 > Web前端 > HTML

jQuery+PHP实现砸金蛋抽奖

时间:2023-04-02 18:15:09 HTML

Demo下载地址:http://www.erdangjiade.com/js...效果图:三个金蛋,一个锤子和中奖结果#result_tip代码如下:锤子123jQuery1。当鼠标滑到金蛋上时,锤子只会在金蛋的右上角,位置由position()控制。$(".egg_listli").hover(function(){varposition_left=$(this).position().left+$(this).width();$("#hammer").show()。css('left',position_left);})在挥锤击中金蛋eggClick()之前,我们先把金蛋中的数字隐藏起来。$(".eggListli").click(function(){$(this).children("span").hide();eggClick($(this));});最后我们向后台ajax.php发送一个ajax请求,后台php程序会处理奖品分配并返回中奖结果。我们使用animate()来实现砸锤子的动画,通过改变锤子的top和left位置来实现一个简单的动画效果。落下锤子后,金蛋样式变为.curruent,金花四溅,终于显示中奖结果,再来看砸蛋的eggClick方法:functioneggClick(obj){$.get("ajax.php",function(data){if(obj.hasClass("current")){alert("鸡蛋坏了一个地方,刷新重新开始!");returnfalse;}$(".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("抱歉,您没有中奖!");}});});},"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'=>'30GUDisk','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_arras$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'];//中奖echojson_encode($data);exit;//以json数组形式返回给前端functiongetRand($proArr){//计算中奖概率$rs='';//z获胜结果$proSum=array_sum($proArr);//概率数组的总概率准确率//概率数组循环foreach($proArras$key=>$proCur){$randNum=mt_rand(1,$proSum);如果($randNum<=$proCur){$rs=$key;休息;}else{$proSum-=$proCur;}}未设置($proArr);返回$rs;}通过ajax.php,我们可以看到一共设置了7个奖品,并设置了中奖概率。例如,打中“iphone5s”的概率是5%,打不中的概率是10%。点击演示试试你的运气。Demo下载地址:http://www.erdangjiade.com/js...