Jquery.rotate.js optional lottery number and winning content of the turntable lottery demo__js

Demand:

Can draw a maximum of 5 times, and, each time only will be "2000 Yuan money" or "Thank you for participation", others will not be drawn (haha, sure enough is the routine).

The effect is as follows:

First, the page structure:

1 <div class= "G-content" >
 2     <div class= "G-lottery-case" >
 3         <div class= "G-left" >
 4             
 
The label H2 for the content,. Playnum is the number of remaining draws,. G-lottery-img is the outermost flashing light,. G-lottery-img is the rotating content,. PLAYBTN is click on the Lottery button.

Here is the use of jquery.rotate.js, so to introduce jquery and then introduce Jquery.rotate.js, Baidu is very simple, not a few AIP.


Second, the simple style:

 1 <style> 2 g-content {3 width:100%;
 4 background: #fbe3cc;
 5 Height:auto;
 6 font-family: "Microsoft Ya Hei", "Microsoft Yahei"; 7} 8 g-content. g-lottery-case {9 width:500px margin:0 auto Overflow:hidde
N         G-content g-lottery-case g-left h2 {font-size:20px/line-height:32px; 16
Font-weight:normal;
margin-left:20px;     G-content. g-lottery-case g-left {width:450px float:left; 23} 24  . g-lottery-box {width:400px height:400px margin-left:30px; Position:
relative;
Background:url (ly-plate-c.gif) no-repeat; G-lottery-box. g-lottery-img {width:340px height:340px; position:re
lative;
Background:url (bg-lottery.png) no-repeat;
left:30px; Notoginseng top:30px; G-lottery-box playbtn {width:186px, height:186px, Position:absolute
;
top:50%;
left:50%;
Margin-left: -94px;
Margin-top: -94px;
Background:url (playbtn.png) no-repeat; </style>
 
The style is fixed height, center, show the background picture

Third, JS code:

 1 <script> 2 $ (function () {3 var $btn = $ ('. g-lottery-img ');/rotate div 4 var playnum = 5;// Initial number of times, from the background to 5 $ ('. Playnum '). HTML (playnum); show how many lottery opportunities are left 6 var isture = 0;//is drawing 7 var Clickfu             NC = function () {8 var data = [1, 2, 3, 4, 5, 6];//Lottery 9//data as a random result, according to the probability of the result 10                      data = Data[math.floor (Math.random () * data.length)];//1~6 random number one switch (data) {case 1:13
Rotatefunc (1, 0, ' Congratulations you get 2000 Yuan money ');
break;
Case 2:16 Rotatefunc (2, 0, ' Congratulations you get 2000 Yuan Money 2 ');
break;
Case 3:19 Rotatefunc (3, 0, ' Congratulations you get 2000 Yuan Money 3 ');
break;
Case 4:22 Rotatefunc (4,-60, ' Thank you for participating in 4 ');
break;
Case 5:25 Rotatefunc (5, 120, ' Thank you for participating in 5 ');    26                 Break
Case 6:28 Rotatefunc (6, 120, ' Thank you for participating in 6 ');
break;              $ ("Playbtn"). Click (function () {34 if (isture) return;//////////////////// Isture = true; Flag is executed in the execution of if (playnum <= 0) {//When the lottery number is 0 ("No more times"); $ ('. P
Laynum '). HTML (0);//number shown as 0 isture = false;
= 0) {playnum = 0; $ ('. Playnum '). HTML (playnum);
Clickfunc ();
46} 47}); The var rotatefunc = function (awards, angle, text) {isture = true; $btn. Stoprotate ()
; $btn rotate ({angle:0,//rotation angle duration:4000,//Rotation time 54                Animateto:angle + 1440,//given angle, let it be based on the result of the resulting plus 1440 degrees rotation callback:function () {56 Isture = false;
The sign is executed by alert (text);
58} 59});
60};
61 62}); </script>
 
In the final analysis is to use a 1~6 random number, and then the corresponding angle value to the jquery.rotate.js, it will go to the corresponding place, and finally do the corresponding number of the remaining times of judgment and modification.

Finally all code is: View code

The picture you need (it doesn't seem to upload the compressed file, so you can't upload the whole package):

#复制下面的图片名称-Mouse over the picture-right-picture Save As-paste save #

1. The outermost flashing light: ly-plate-c.gif


2. Six winning content: Bg-lottery.png


3. Click the Lottery button: playbtn.png





Http://www.cnblogs.com/zhengshize/archive/2017/08/22/7413110.html