Principle of the big turntable: randomly generates a number and uses the background to calculate the returned angle of the specified jump in that probability range.
First prize probability 1%: if the value ranges from 1 to 100, a random value of 100 will jump to the first prize.
The second prize probability is 2%. If the value ranges from 1 to 100, a random value of 99 to 98 is displayed, the second prize is redirected to the second prize.
The third prize probability is 97%. If a 100-random 97-1 error occurs, the third prize is redirected to the third prize.
The code is as follows: |
Copy code |
<! DOCTYPE html> <Html> <Title> RunJS </title> <Script class = "jquery library" src = "./jquery-1.8.2.min.js" type = "text/javascript"> </script> <Script type = "text/javascript" src = "./jQueryRotate.2.2.js"> </script> </Head> <Body> <Div id = "lottery"> <Div class = "arrow"> </div> <Div class = "lot-btn first"> <Span> </span> </Div> </Div> <Style> # lottery { Background: url ("./disc-bg.gif") no-repeat scroll 0 0 transparent; Height: Pixel px; Left: 50px; Position: absolute; Width: Pixel px; } # Lottery. arrow { Background: url ("./arrow.png") no-repeat scroll 0 0 transparent; Height: 191px; Left: 207px; Position: absolute; Top: 91px; Width: 32px; } # Lottery. lot-btn { Height: 92px; Left: 177px; Overflow: hidden; Position: absolute; Top: 181px; Width: 91px; } # Lottery. lot-btn span { Cursor: pointer; Display: block; Height: 92px; Position: relative; Width: 91px; } # Lottery. first span { Background: url ("./buttons_01.png") no-repeat scroll 0 0 transparent; } </Style> <Script> $ (function (){ $ (". Lot-btn"). click (function (){ For (var I = 0; I <= 10000; I ++ ){ $ ("# Imgs"). rotate ({ AnimateTo: I, Duration: 10000 }); If (I> = 3986 ){ Break; } } }) }); </Script> </Body> |
The effect is as follows: