Use jQuery + PHP + Mysql to implement the lucky draw Program

The lottery program is widely used in real life, because there are many different lottery methods in different application scenarios. This article uses examples to explain how to use jQuery + PHP + Mysql to implement a simple Lucky Draw program similar to the one common on TV.

In this example, the lottery program randomly selects a number from a large number of mobile phone numbers as the winning number. The lottery can be performed multiple times, and the number being drawn will not be pulled again. Lottery Drawing Process: click the "Start" button, the program obtains the number information, scroll to display the number, when you click the "stop" button, the number stops rolling, then the displayed number is the winning number, you can click the start button to continue the lottery.

Use jQuery + PHP + Mysql to implement the lucky draw Program

The lottery program is widely used in real life, because there are many different lottery methods in different application scenarios. This article uses examples to explain how to use jQuery + PHP + Mysql to implement a simple Lucky Draw program similar to the one common on TV.

In this example, the lottery program randomly selects a number from a large number of mobile phone numbers as the winning number. The lottery can be performed multiple times, and the number being drawn will not be pulled again. Lottery Drawing Process: click the "Start" button, the program obtains the number information, scroll to display the number, when you click the "stop" button, the number stops rolling, then the displayed number is the winning number, you can click the start button to continue the lottery.

HTML

<Div id = "roll"> </div> <input type = "hidden" id = "mid" value = "">
<P> <input type = "button" class = "btn" id = "start" value = "start">
<Input type = "button" class = "btn" id = "stop" value = "stop"> </p>
<Div id = "result"> </div>

In the above Code, we need a # roll to display the rolling number, # mid to record the id of the drawn number, and then two buttons are required for "start" and "stop" respectively, finally, you need a # result to display the lottery result.

CSS

We use simple css to modify html pages.

.demo{width:300px; margin:60px auto; text-align:center} 
#roll{height:32px; line-height:32px; font-size:24px; color:#f30} 
.btn{width:80px; height:26px; line-height:26px; background:url(btn_bg.gif) 
 repeat-x; border:1px solid #d3d3d3; cursor:pointer} 
#stop{display:none} 
#result{margin-top:20px; line-height:24px; font-size:16px; text-align:center} 

Note: by default, the button # stop is set to display: none to show only the start button at the beginning. After you click Start, the lottery is in progress, the stop button is displayed.

JQuery

The first thing we need to achieve is to click the "Start" button to obtain the data used for the lottery from the background through ajax, that is, the mobile phone number, and then display the mobile phone number through regular scrolling, note that the displayed mobile phone number is random, that is, it does not appear in a certain order. Let's look at the following code:

$ (Function (){
Var _ gogo;
Var start_btn = $ ("# start ");
Var stop_btn = $ ("# stop ");

Start_btn.click (function (){
$. GetJSON ('data. php', function (json ){
If (json ){
Var obj = eval (json); // converts a JSON string to an object.
Var len = obj. length;
_ Gogo = setInterval (function (){
Var num = Math. floor (Math. random () * len); // obtain a random number.
Var id = obj [num] ['id']; // random id
Var v = obj [num] ['mobile']; // corresponding Random Number
$ ("# Roll" pai.html (v );
$ ("# Mid"). val (id );
}, 100); // executed every 0.1 seconds
Stop_btn.show ();
Start_btn.hide ();
} Else {
$ ("# Roll" into .html ('the system cannot find the data source. Please import the data first. ');
}
});
});
});

First, we define variables to facilitate subsequent calls. Then, when you click "start", the page sends an Ajax request to data. php In the background. Here we use jqeury's getJSON to complete asynchronous requests. When the background returns json data, we can use the eval () function to convert the JSON string to the object obj, which is actually to convert the json data into an array. In this case, we use setInterval to make a timer. The timer should randomly obtain the phone number information in the array obj and display it on the page. Then run the timer at every 0.1, so that the lottery number is displayed in a scroll. The "stop" button is displayed, and the "Start" button is hidden. The lottery is in progress.

Next, let's take a look at what the "stop" action requires.

    stop_btn.click(function(){ 
        clearInterval(_gogo); 
        var mid = $("#mid").val(); 
        $.post("data.php?action=ok",{id:mid},function(msg){ 
            if(msg==1){ 
                var mobile = $("#roll").html(); 
                $("#result").append("<p>"+mobile+"</p>"); 
            } 
            stop_btn.hide(); 
            start_btn.show(); 
        }); 
    }); 

When you click "stop", the lottery is over. Use the clearInterval () function to stop the timer, get the id of the number being drawn, and then send the selected number id to the background data. php for processing through $. post. The number to be extracted must be marked in the database. If the background processing is successful, the front-end appends the winning number to the winning result, hides the "stop" button, and displays the "Start" button. You can draw a lottery again.

Note: We use setInterval () and clearInterval () to set the timer and stop the timer. You can use these two functions on google or Baidu.

PHP

Data. php needs to do two things: first, connect to the database, read the mobile phone number information (not including the winning number), and then convert it into json format and output it to the front-end. Second, after receiving a front-end request, modify the status of the winning number in the corresponding database to identify that the number has won the prize and will not be used as the lucky draw number next time.

Include_once ('connect. php'); // connect to the database
 
$ Action = $ _ GET ['action'];
If ($ action = "") {// read data, return json
$ Query = mysql_query ("select * from member where status = 0 ");
While ($ row = mysql_fetch_array ($ query )){
$ Arr [] = array (
'Id' => $ row ['id'],
'Mobile' => substr ($ row ['mobile'],). "***". substr ($ row ['mobile)
);
}
Echo json_encode ($ arr );
} Else {// identifies the winning number
$ Id = $ _ POST ['id'];
$ SQL = "update member set status = 1 where id = $ id ";
$ Query = mysql_query ($ SQL );
If ($ query ){
Echo '1 ';
}
}

We can see that the data table member has a field called status, which is used to identify whether to win the prize. 1 indicates that you have won the prize, and 0 indicates that you have not won the prize. This background php program is to operate the database and then return the corresponding information to the front-end.

MYSQL

Finally, attach the structure information of the member table.

CREATE TABLE `member` ( 
  `id` int(11) NOT NULL auto_increment, 
  `mobile` varchar(20) NOT NULL, 
  `status` tinyint(1) NOT NULL default '0', 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 

The lottery program has different forms of presentation based on different needs in different application scenarios. Next we will introduce how to implement the lottery program based on different probabilities. Please stay tuned to helloweba.com

 

Http://www.helloweba.com/view-search-183.html