Compile the prize winning program _ PHP instance based on JQuery + php

The golden egg is widely used in celebrations, sales promotions, TV and entertainment. Its fun and suspense can rapidly make the atmosphere lively, we can also apply the tool to a WEB site for online activities. This article uses jQuery + PHP to explain how to implement a WEB tool, if you need a friend to study together, we will first show you:

View demo download source code

Preparations

We need to prepare items (materials), including images of golden eggs, images of crushed eggs, floral images of crushed eggs, and hammers.

HTML

On our page, we want to display a table with three golden eggs numbered 1, 2, and 3 and a hammer. We construct the following html code:

  
 
 
  
  
  
Hammers
  
  
  
  
  
  
1
  
  
  
2
  
  
  
3
  
 
 
 
 

In the above Code, put the. hammer and the. resultTip is used to show the results after the egg is hit, that is, whether there is any prize. Three li s are placed respectively with three golden eggs. We use CSS to describe 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;}

According to the above code, we can see a complete Use Case on the page. Note that we use png images. If your customers are still using ie6, you may need to make the png Image transparent.

JQuery

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

First, when the mouse slides to the golden egg, the hammer used to smash the golden egg will only rely on the upper right corner of the golden egg. You can use position () to locate it.

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

Then, click the golden egg, that is, the process of hitting the golden egg with a hammer. In the click operation, we first hide the numbers in the egg, and then call the custom function eggClick ().

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

Finally, in the custom function eggClick (), we use $. the getJSON method returns data to the background. php sends an ajax request. The background php program processes the award assignment and returns the winning result. We use animate () to achieve the animation of the hammer. By changing the top and left seats of the hammer, we can achieve a simple animation effect. After the hammer falls down, the golden egg style changes. curr, with a splash of gold at the same time, then the winning result. the resultTip shows whether you win the prize depends on your luck and the chance of winning the background award. Let's look at the code of eggClick (), the golden egg function:

Function eggClick (obj) {var _ this = obj; $. getJSON ("data. php ", function (res) {// ajax request _ this. unbind ('click'); // unbind click $ (". hammer "developer.css ({" top ": _ this. position (). top-55, "left": _ this. position (). left + 185}); $ (". hammer "). animate ({// hammer Animation "top": _ this. position (). top-25, "left": _ this. position (). left + 125}, 30, function () {_ this. addClass ("curr"); // egg crushing effect _ this. find ("sup "). show (); // treasure $ (". hammer "). hide (); // hide Hammer certificate ('.resulttip'0000.css ({display: 'block', top: '100px ', left: _ this. position (). left + 45, opacity: 0 }). animate ({top: '50px ', opacity: 1}, 300, function () {// animation of the winning result if (res. msg = 1) {// return result $ ("# result" ).html ("Congratulations, you get" + res. prize + "! ");} Else {$ (" # result "}.html (" sorry, you failed to win! ");}});});});}

In order to more realistically integrate the egg program into your website, you can verify your membership identity before the egg, limit the number of egg attempts, and leave contact information after winning the egg, it depends on the website requirements.

PHP

Data. php processes ajax requests sent by the front end. We use the probability algorithm to output the winning results in json format based on the set winning probability. For an example of probability calculation, refer to PHP + jQuery to achieve a lottery drawing.

$ Prize_arr = array ('0' => array ('id' => 1, 'prize' => 'tablet ', 'V' => 3 ), '1' => array ('id' => 2, 'prize' => 'digital camera ', 'V' => 5 ), '2' => array ('id' => 3, 'prize' => 'speaker device', 'V' => 10 ), '3' => array ('id' => 4, 'prize' => '4g disks', 'V' => 12 ), '4' => array ('id' => 5, 'prize' => 'q coin 10 yuan ', 'V' => 20 ), '5' => array ('id' => 6, 'prize' => 'next time you may be able to get in,', 'V' => 50 ),); foreach ($ prize_arr as $ key => $ val) {$ arr [$ val ['id'] = $ val ['V'];} $ rid = getRand ($ arr ); // Obtain the award id $ res ['msg '] = ($ rid = 6) based on the probability )? ; // If it is 0, $ res ['prize'] = $ prize_arr [$ rid-1] ['prize']; // medium award echo json_encode ($ res); // calculate the probability function getRand ($ proArr) {$ result = ''; // The total probability precision of the probability array $ proSum = array_sum ($ proArr); // The probability array loop foreach ($ proArr as $ key => $ proCur) {$ randNum = mt_rand (1, $ proSum); if ($ randNum <= $ proCur) {$ result = $ key; break ;} else {$ proSum-= $ proCur ;}} unset ($ proArr); return $ result ;}

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