Write a golden egg winning program based on JQuery+PHP, jquery wins

Write a golden egg winning program based on JQuery+PHP, jquery wins_PHP tutorial

WBOY

Release： 2016-07-13 16:53:57

Original

1136 people have browsed it

Write a golden egg winning program based on JQuery+PHP, jquery wins the prize

First of all, I will show you the rendering:

View demo Download source code

Preparation

We need to prepare props (materials), that is, related pictures, including pictures of golden eggs, pictures of smashed eggs, pictures of smashed flowers, and pictures of hammers.

HTML

What we want to show on our page is a golden egg smashing platform. There are three golden eggs numbered 1, 2, and 3 on the platform, as well as a hammer. We build the following html code:

<div class="egg"> 
 <ul class="eggList"> 
 <p class="hammer" id="hammer">锤子</p> 
 <p class="resultTip" id="resultTip"><b id="result"></b></p> 
 <li><span>1</span><sup></sup></li> 
 <li><span>2</span><sup></sup></li> 
 <li><span>3</span><sup></sup></li> 
 </ul> 
</div>

Copy after login

In the above code, .hammer is used to place the hammer, .resultTip is used to display the results after smashing the eggs, that is, whether there is a prize or not. Three li's are used to place 3 golden eggs respectively. We use CSS to decorate the effect.

CSS

.egg{width:660px; height:400px; margin:50px auto 20px auto;} 
.egg ul li{z-index:999;} 
.eggList{padding-top:110px;position:relative;width:660px;} 
.eggList li{float:left;background:url(images/egg_1.png) no-repeat bottom;width:158px; 
height:187px;cursor:pointer;position:relative;margin-left:35px;} 
.eggList li span{position:absolute; width:30px; height:60px; left:68px; top:64px; color:#ff0; 
 font-size:42px; font-weight:bold} 
.eggList li.curr{background:url(images/egg_2.png) no-repeat bottom;cursor:default;z-index:300;} 
.eggList li.curr sup{position:absolute;background:url(images/img-4.png) no-repeat;width:232px; 
height:181px;top:-36px;left:-34px;z-index:800;} 
.hammer{background:url(images/img-6.png) no-repeat;width:74px;height:87px;position:absolute; 
text-indent:-9999px;z-index:150;left:168px;top:100px;} 
.resultTip{position:absolute; background:#ffc ;width:148px;padding:6px;z-index:500;top:200px; 
left:10px; color:#f60; text-align:center;overflow:hidden;display:none;z-index:500;} 
.resultTip b{font-size:14px;line-height:24px;}

Copy after login

According to the above code, we can see a complete golden egg breaking scene on the page. Note that we use png images. If your customers are still using IE6, you may need to process the transparency of the png images. This article will not deal with it.

jQuery

Next, we will use jQuery code to implement the entire process of smashing golden eggs, breaking eggs, and displaying the winning results. Of course, the old rule is that for example programs implemented with jQuery, you must first load the jQuery library file.

First of all, when the mouse slides towards the golden egg, the hammer used to smash the golden egg will only be on the upper right side of the golden egg, which can be positioned using position().

$(".eggList li").hover(function() { 
 var posL = $(this).position().left + $(this).width(); 
 $("#hammer").show().css('left', posL); 
})

Copy after login

Then, click on the golden egg, which is the process of swinging the hammer to hit the golden egg. We first hide the numbers in the golden eggs in click, and then call the custom function eggClick().

$(".eggList li").click(function() { 
 $(this).children("span").hide(); 
 eggClick($(this)); 
});

Copy after login

Finally, in the custom function eggClick(), we use jQuery’s $.getJSON method to send an ajax request to the background data.php. The background PHP program will handle the award distribution and return the winning results. We use animate() to realize the animation of smashing the hammer, and achieve a simple animation effect by changing the top and left positions of the hammer. After the hammer hits, the golden egg style changes to .curr, while gold flowers splash, and then the winning result. resultTip shows that whether you win or not depends on your luck and the winning probability set by the background awards. Let’s look at the code of the golden egg function eggClick():

function eggClick(obj) { 
 var _this = obj; 
 $.getJSON("data.php",function(res){//ajax请求 
 _this.unbind('click'); //解除click 
 $(".hammer").css({"top":_this.position().top-55,"left":_this.position().left+185}); 
 $(".hammer").animate({//锤子动画 
 "top":_this.position().top-25, 
 "left":_this.position().left+125 
 },30,function(){ 
 _this.addClass("curr"); //蛋碎效果 
 _this.find("sup").show(); //金花四溅 
 $(".hammer").hide();//隐藏锤子 
 $('.resultTip').css({display:'block',top:'100px',left:_this.position(). 
 left+45,opacity:0}) 
 .animate({top: '50px',opacity:1},300,function(){//中奖结果动画 
  if(res.msg==1){//返回结果 
  $("#result").html("恭喜，您中得"+res.prize+"!"); 
  }else{ 
  $("#result").html("很遗憾,您没能中奖!"); 
  } 
 }); 
 } 
 ); 
 }); 
}

Copy after login

In order to integrate the golden egg smashing program into your website more truly, you can verify your membership status before smashing eggs, limit the number of eggs smashed, leave your contact information after smashing eggs and winning, etc., depending on the needs of the website. .

PHP

data.php processes the ajax request sent by the front end. We use probability algorithm to output the winning results in json format according to the set winning probability. For examples of probability calculations, please refer to: PHP+jQuery to implement flip lottery

$prize_arr = array( 
 '0' => array('id'=>1,'prize'=>'平板电脑','v'=>3), 
 '1' => array('id'=>2,'prize'=>'数码相机','v'=>5), 
 '2' => array('id'=>3,'prize'=>'音箱设备','v'=>10), 
 '3' => array('id'=>4,'prize'=>'4G优盘','v'=>12), 
 '4' => array('id'=>5,'prize'=>'Q币10元','v'=>20), 
 '5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>50), 
); 
foreach ($prize_arr as $key => $val) { 
 $arr[$val['id']] = $val['v']; 
} 
$rid = getRand($arr); //根据概率获取奖项id 
$res['msg'] = ($rid==6)&#63;0:1; //如果为0则没中 
$res['prize'] = $prize_arr[$rid-1]['prize']; //中奖项 
echo json_encode($res); 
//计算概率 
function getRand($proArr) { 
 $result = ''; 
 //概率数组的总概率精度 
 $proSum = array_sum($proArr); 
 //概率数组循环 
 foreach ($proArr as $key => $proCur) { 
 $randNum = mt_rand(1, $proSum); 
 if ($randNum <= $proCur) { 
 $result = $key; 
 break; 
 } else { 
 $proSum -= $proCur; 
 } 
 } 
 unset ($proArr); 
 return $result; 
}

Copy after login

By setting the probability, we can see that the probability of hitting the tablet is 3%, and the probability of not hitting it is 50%. Click on the demo to try your luck.