jquery Lottery Small Program Implementation code _jquery

Use jquery to implement lottery small program

These days, everywhere can be seen on the micro-mail program news or reporting, in the blog to write about the micro-mail program is also a lot. But what I'm going to say today is not the micro-mail program, but a fun lottery program written in simple jquery. Finally, the following about the lottery small program of some of the next update direction and math.random Some of the small knowledge. (Final result guaranteed: Http://runjs.cn/detail/rq3bbhto, click to view effect)

Let's look at a simple lottery example:

Html:

<div class= "G-lottery-box" >
  <div class= "g-lottery-img" > <a class= "playbtn" href= "
    JavaScript :; "title=" Start the lottery ></a>
  </div>
</div>
 

Css:

*{margin:0; padding:0;
G-lottery-box {
  width:400px;
  height:400px;
  margin-left:30px;
  position:relative;
  Background:url (images/0.gif) no-repeat;
  margin:0 Auto;
    
G-lottery-box. g-lottery-img {
  width:340px;
  height:340px;
  position:relative;
  Background:url (images/1.png) no-repeat;
  left:30px;
  top:30px
}
      
. G-lottery-box #clik {
  width:186px;
  height:186px;
  Position:absolute;
  top:77px;
  left:77px;
  Background:url (images/2.png) no-repeat;
}

Js:

/* Note the order of references * <script src= "js/jquery-2.1.1.min.js" type= "Text/javascript" charset= "Utf-8" ></script> * < Script src= "Js/jquery.rotate.min.js" type= "Text/javascript" charset= "Utf-8" ></script> * <script src= "js/"
Demo.js "type=" Text/javascript "charset=" Utf-8 "></script> * creat by foodoir 2010-10-11 * * * * * var ranum;
    Note: It is easy to make mistakes by setting Ranum to global variables $ (function () {$ (' #clik '). Click (function () {//Ranum = Math.random () *360; $ (this). Rotate ({duration:3000, angle:0, animateto:ranum+720+360, Callback:function () {A ()
      ;
  }
    });
});

}); function A () {if (0 < Ranum && ranum <=) {alert ("Congratulations on your Money 2000 dollars!")
    ");
  Return
    }else if (< Ranum && Ranum <=) {alert ("Thank you for participating ~ Come again ~");
  Return }else if (< Ranum && Ranum <=) {alert ("Congratulations on your money 5200 dollars!")
    ");
  Return }else if (< Ranum && Ranum <= 210) {alert ("Congratulations on your acquisition of the 100-dollar Jingdong e-card, will be in the secondDay to send a message to your mobile phone, please pay attention to check! ");
  Return
    }else if (210 < Ranum && Ranum <= 270) {alert ("Thank you for participating ~ Come again ~");
  Return }else if (270 < Ranum && Ranum <=) {alert ("Congratulations on your money 1000 dollars!")
    ");
  Return }else if (< Ranum && Ranum <= 360) {alert ("Congratulations on your Money 2000 dollars!")
    ");
  Return

 }
}

Some thoughts on the small program:

Thinking one: In a () method with a lot of if...else, so that the code does not look so graceful, is there any way to make the code look like a little bit?

Solution: Using the Switch method

Switch (data) {case
  1:
    rotatefunc (1, 0, ' Congratulations on your $2000 money! ');
    break;
  Case 2:
    rotatefunc (2, 60, ' Thank you for participating ~ Come again ~ ');
    break;
  Case 3:
    Rotatefunc (3, 120, ' Congratulations you get 5200 yuan money! ');
    break;
  Case 4:
    Rotatefunc (4, 180, ' Congratulations you get 100 Yuan Jingdong e card, will be in the next day to send a message form to your mobile phone, please check! ');
    break;
  Case 5:
    Rotatefunc (5, 240, ' Thank you for participating ~ Come again ~ ');
    break;
  Case 6:
    Rotatefunc (6, 300, ' Congratulations you get 1000 yuan money! ');
    break;

You also need to define the function Rotatefunc, where you can use a different method directly to complete the
var rotatefunc = function (awards, angle, text) {
  isture = true;
  $btn. Stoprotate ();
  $btn. Rotate ({
    angle:0,
    duration:4000,//Rotate time
    animateto:angle + 1440,//Let it be based on the result of the results plus 1440 degrees of rotation
    Callback:function () {
      isture = false;//flag is execution complete
      alert (text);
    }
  );

Thinking two: The actual large turntable can turn several laps, and at this time the effect turned less than a lap, I would like to see how the effect of rotating a few laps?

Solution: Animateto:ranum Add 360 times the result of the number of laps you want to turn, (take the lottery three times for example)

Animateto:ranum+360*3

Think three: Can we limit the number of lottery draws?

Solution idea: (Take the lottery three times as an example)

$ (function () {
  var i =0;
  $ (' #clik '). Click (function () {
    i++;
    if (i>3) {
      alert ("Your lottery opportunity has been exhausted!") ");
    }
    Code omitted
  });

Thinking four: According to the previous thinking, the probability of each lottery can be 1/3, but we are not in practice so want to let users smoke, what should we do?

Solution: 1, we directly change Ranum, (if you do not want to let users get e card)

Ranum = Math.random () *360;
if (< Ranum && Ranum <= 210) {
  Ranum +]

 

2, we revise the judgment condition

else if (< Ranum && Ranum <= 210) {
    //the probability is reduced to 1%
    var n = math.random () *100;
    if (n<1) {
      alert ("Congratulations you get 100 Yuan Jingdong e card, will be sent to your mobile phone in the next day, please pay attention to check!");
    } else{
      Ranum + +;
    }
    return;
  }

Thinking five: For the lottery remaining times, can we remind users?

Solution: Create a new variable and then display it through the DOM method

Thinking six: When we play the buckle game, we often see a scrolling screen tips just who have been drawn to the prize, how do we achieve?

Solution: This requires us to tune the data in the background, but we can set the data ourselves and see the effect, we can also use the date in JavaScript

<div class= "Mar" >
<marquee><span id= "Time" ></span> congratulations Foodoir to Beijing East E card!!!! </marquee>
</div>

var now =new Date ();
var hours = now.gethours ();
var minutes = Now.getminutes ();
var seconds = now.getseconds ();
var t = hours+ ":" +minutes+ ":" +seconds;
$ (' #time '). HTML (t);

Here, the effect of our small program is this:

Click link to view effect: Http://runjs.cn/detail/rq3bbhto

More thinking--we can also improve the process of change.

1, in the existing page to increase the draw list, will be drawn to the award of the user and the time to draw the award displayed, and can automatically refresh (Ajax technology Implementation)
2, increase the login and registration function, register successfully and sign in the rear can be a lottery activities
3, for the prize, we can set its link click can be carried out to the award can be used by the interface
4 、......

Or that we are--"

1, in the existing page to increase the draw list, will be drawn to the award of the user and the time to draw the award to display, and can automatically refresh
2, after the award, we can pick up the reward, provided that the old users can receive after landing, and new users need to register to receive, and the new user after registration also sent three lottery opportunities.
3, Login completed after entering a points mall, there are several rankings (Wealth list and Exchange list) and convertible equivalent replacement
4 、......

More about Math.random's little knowledge

About Math.random ()

The ECMAScript specification describes Math.random () by: "Returns an integer that has a range of values greater than 0 and less than 1, and the browser developer uses a custom algorithm or strategy to achieve a uniformly distributed random or pseudo random effect from that range." ”
Obviously, there are a lot of details missing from the specification. First, it does not define precision. Because ECMAScript uses IEEE 754 double-precision floating-point numbers to store all values, there should theoretically be 53-bit precision, that is, the random range of random numbers is [1/x^53, 2^53-1], but in fact, the Math.random () in V8 is only 32-bit precision, but This is enough for us to use.
The real problem is that the spec is allowing the browser developer to implement the method freely, without limiting the minimum cycle length, and the only requirement for distribution is "approximate uniformity".

About 8 PRNG ()

var Max_rand = Math.pow (2);
var state = [Seed (), seed ()];
var mwc1616 = function mwc1616 () {
  var r0 = (18030 * (state[0) & 0xFFFF)) + (State[0] >>>) | 0;
  var r1 = (36969 * (state[1) & 0xFFFF)) + (State[1] >>> 16) | 0;
  state = [R0, R1];
 
  var x = ((R0 <<) + (R1 & 0xFFFF) | 0;
  if (x < 0) {
    x = x + max_rand;
  }
  return x/max_rand;
}

The above code is the core logic of V8 PRNG. In the old version of the V8 source, there is a comment: "The random number generator uses the MWC algorithm of George Marsaglia." "Based on this comment, I searched the following information from Google:

George Marsaglia, a mathematician who devoted his life to PRNG, also developed tools for testing the quality of random number generation diehard tests
MWC (Multiply-with-carry) is a PRNG algorithm invented by Marsaglia, very similar to LCG (linear congruential generators, linear with congruential), whose advantage is that the generated cycle is longer and close to The cycle cycle of the CPU.

However, V8 PRNG is not the same as the classic MWC generator, because it is not a simple extension of the MWC generator, but rather a combination of two MWC child generators (R0 and R1), which is eventually spliced into a random number. Here we skip the relevant mathematical calculations, only to conclude that the longest cycle length of each child generator is 2^30, combined with 2^60.

As mentioned earlier, the identifiers we define have 2^132 possibilities, so V8 's Math.random () does not meet this requirement. Nevertheless, we still use the function and assume that the generated random number is evenly distributed, then the probability of a collision is only 0.4% after generating 100 million identifiers, but now the collision time is too early, so our analysis must have something wrong. It has been proved that the cycle length is correct, so it is possible that the random numbers generated are not evenly distributed, and there must be other structures that affect the generated sequences.

Thank you for reading, I hope to help you, thank you for your support for this site!