WeChat public platform development

Golden eggs are widely used in celebrations, sales promotions, TV and entertainment, and their interests and suspense can rapidly activate the atmosphere. Similarly, we can apply the quail eggs to WEB websites for online activities. This article uses jQuery and PHP to explain how to implement a WEB tool. Golden eggs are widely used in celebrations, sales promotions, TV and entertainment, and their interests and suspense can rapidly activate the atmosphere. Similarly, we can apply the quail eggs to WEB websites for online activities. This article uses jQuery and PHP to explain how to implement a WEB tool.

Preparation

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.



$ 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% ,.

For more articles related to the development of the public platform, please follow the PHP Chinese network!