本篇内容主要讲解“怎么用jQuery+PHP+Mysql实现抽奖程序”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用jQuery+PHP+Mysql实现抽奖程序”吧!
本例中的抽奖程序要实现从海量手机号码中一次随机抽取一个号码作为中奖号码，可以多次抽奖，被抽中的号码将不会被再次抽中。抽奖流程：点击“开始”按钮后，程序获取号码信息，滚动显示号码，当点击“停止”按钮后，号码停止滚动，这时显示的号码即为中奖号码，可以点击“开始”按钮继续抽奖。
<p id="roll"></p><input type="hidden" id="mid" value="">
<p><input type="button" class="btn" id="start" value="开始">
<input type="button" class="btn" id="stop" value="停止"></p>
<p id="result"></p>
上述代码中，我们需要一个#roll用来显示滚动号码，#mid是用来记录抽中的号码id，然后就是需要两个按钮分别用来“开始”和“停止”动作，最后还需要一个#result显示抽奖结果。
我们使用简单的css来修饰html页面。
.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}
注意，我们默认将按钮#stop设置为display:none，是为了一开始只显示“开始”按钮，点击“开始”后，抽奖进行中，将显示“停止”按钮。
我们首先要实现的是点击“开始”按钮，通过ajax从后台获取抽奖用的数据即手机号码，然后通过定时滚动显示手机号码，注意每次显示的手机号码是随机的，也就是说不是按照某种顺序出现的，我们看下面的代码：
$(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);//将JSON字符串转化为对象
var len = obj.length;
_gogo = setInterval(function(){
var num = Math.floor(Math.random()*len);//获取随机数
var id = obj[num]['id']; //随机id
var v = obj[num]['mobile']; //对应的随机号码
$("#roll").html(v);
$("#mid").val(id);
},100); //每隔0.1秒执行一次
stop_btn.show();
start_btn.hide();
}else{
$("#roll").html('系统找不到数据源，请先导入数据。');
}
});
});
});
首先我们定义变量，方便后续调用。然后，当点击“开始”按钮后，页面向后台data.php发送Ajax请求，这里我们使用jqeury的getJSON来完成异步请求。当后台返回json数据时，我们通过通过eval() 函数可以将JSON字符串转化为对象obj，其实就是将json数据转换为数组了。这时，我们使用setInterval做一个定时器，定时器里需要做的工作是：随机获取数组obj中的手机号码信息，然后显示在页面上。然后每隔0.1运行定时器，这样就达到了滚动显示抽奖号码的效果。同时显示“停止”按钮，隐藏“开始”按钮，这时抽奖进行中。
接下来看“停止”动作需要做的工作。
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();
});
});
当单击“停止”按钮，意味着抽奖结束。使用clearInterval()函数停止定时器，获取被抽中号码的id，然后通过$.post将选中号码id发送给后台data.php处理。应为被抽中的号码需要在数据库中标记。如果后台处理成功，前端将中奖号码追加到中奖结果中，同时隐藏“停止”按钮，显示“开始”按钮，可以再次抽奖了。
注意，我们使用setInterval()和clearInterval()设置定时器和停止定时器，关于这两个函数的使用大家可以google或百度下。
data.php需要做两件事，一，通过连接数据库，读取手机号码信息（不包好已中奖号码），然后通过转换成json格式输出给前端；二，通过接收前端请求，修改对应的数据库中的中奖号码状态，即标识该号码已中奖，下次将不再作为抽奖号码。
include_once('connect.php'); //连接数据库
$action = $_GET['action'];
if($action==""){ //读取数据，返回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{ //标识中奖号码
$id = $_POST['id'];
$sql = "update member set status=1 where id=$id";
$query = mysql_query($sql);
if($query){
echo '1';
}
}
我们可以看出，数据表member中有个字段叫status，这个字段是用来标识是否中奖。1表示已中奖，0表示未中奖。这个后台php程序就是操作数据库，然后返回对应的信息给前端。
MYSQL
最后将member表结构信息附上。
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;
到此，相信大家对“怎么用jQuery+PHP+Mysql实现抽奖程序”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
