In this case the lottery program to achieve massive phone numbers from a random sample of a number as the winning numbers, lottery multiple times, was drawn numbers will not be drawn again. Lottery process: Click the "Start" button, the program get number information, scroll the display number, click on the "Stop" button, the number stops rolling, then the number is the winning number is displayed, you can click the "Start" button to continue the draw.
HTML
<div class="demo">
<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>
</div>The above code, we need a #roll to display scrolling numbers, # mid pumping is used to record the number id, then that requires two buttons are used to "start" and "stop" action, and finally also need a # result display lottery results.
CSS
We used to decorate a simple html css page.
.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 that we will default button #stop set to display: none, is beginning to show only the "start" button, click the "Start", sweepstakes underway, the "Stop" button.
jQuery
We first want to achieve is to click the "Start" button to get the draw data from the background by using ajax ie phone number, and then scroll through the regular phone number is displayed, note that each display cell phone number is random, that is not in accordance with a species in order of appearance, we look at the following code:
start_btn.click(function(){
$.getJSON('data.php',function(json){
if(json){
//var obj = eval(json);//By eval () function can be converted into JSON string object
var len = json.length;
_gogo = setInterval(function(){
var num = Math.floor(Math.random()*len);
//var id = obj[num]['id'];
var id = json[num].id;
//var v = obj[num]['mobile'];
var v = json[num].mobile;
$("#roll").html(v);
$("#mid").val(id);
},100);
stop_btn.show();
start_btn.hide();
}else{
$("#roll").html('System can not find the data source, first import the data.');
}
});
//_gogo = setInterval(show_number,100);
});});First, we define the variables, convenient subsequent calls. Then, when you click the "Start" button, the page sends an Ajax request to the background data.php, here we use jqeury of getJSON to complete the asynchronous request. When backstage return json data, we passed through the eval () function can be converted into JSON string object obj, in fact, will be converted to an array of json data. In this case, we use setInterval to make a timer, the timer needs to be done inside is: get an array of obj in a random phone number information, and then displayed on the page. Then every 0.1 running timer, so that to achieve the effect of scrolling display lottery numbers. Also shows the "stop" button, hide the "Start" button, then raffle underway.
Next, look at the "stop" action needs to be done.
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" button to end means that the draw. Use clearInterval () function stops the timer, access numbers are drawn id, then select the number by $ .post will be sent to the background data.php handle id. Should be marked as being drawn numbers in the database. If the background process is successful, the winning numbers will be added to the front end of the winning results, while hiding the "Stop" button to display the "start" button, you can raffle again.
Note that we use the setInterval () and clearInterval () to set the timer and stop timer, on the use of these two functions we can google or the next Baidu.
PHP
data.php need to do two things, one, by connecting to the database, read phone number information (not wrapped already winning numbers), and then converted into json format output to the front-end; two, the front end by receiving a request to modify the corresponding database the winning numbers in the state, that identifies the number has been winning, next time will not be as lottery numbers.
include_once('connect.php'); //connect db
$action = $_GET['action'];
if($action==""){ //read date, 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'],0,3)."****".substr($row['mobile'],-4,4)
);
}
echo json_encode($arr);
}else{ //Identification winning numbers
$id = $_POST['id'];
$sql = "update member set status=1 where id=$id";
$query = mysql_query($sql);
if($query){
echo '1';
}
} We can see the data sheet member has a field called status, this field is used to identify whether or not winning. 1 indicates that win, 0 for winning. This background php program is operational database, and then returns the corresponding information to the front end.
MYSQL
Finally, the member table structure information attached.
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; About lottery program, depending on the needs of different applications have different manifestations. Next we have articles on how to implement in accordance with different probabilities of lottery program, so stay tuned.
