jQuery+PHP+Mysql实现抽奖程序

抽奖程序在实际生活中广泛运用，由于应用场景不同抽奖的方式也是多种多样的。本文将采用实例讲解如何利用jQuery+PHP+MySQL实现类似电视中常见的一个简单的抽奖程序。

查看演示

本例中的抽奖程序要实现从海量手机号码中一次随机抽取一个号码作为中奖号码，可以多次抽奖，被抽中的号码将不会被再次抽中。抽奖流程：点击“开始”按钮后，程序获取号码信息，滚动显示号码，当点击“停止”按钮后，号码停止滚动，这时显示的号码即为中奖号码，可以点击“开始”按钮继续抽奖。

HTML

<div id="roll"></div><input type="hidden" id="mid" value=""> 
<p><input type="button" class="btn" id="start" value="开始"> 
<input type="button" class="btn" id="stop" value="停止"></p> 
<div id="result"></div> 

上述代码中，我们需要一个#roll用来显示滚动号码，#mid是用来记录抽中的号码id，然后就是需要两个按钮分别用来“开始”和“停止”动作，最后还需要一个#result显示抽奖结果。

CSS

我们使用简单的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，是为了一开始只显示“开始”按钮，点击“开始”后，抽奖进行中，将显示“停止”按钮。

jQuery

我们首先要实现的是点击“开始”按钮，通过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或百度下。

PHP

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  # 抽奖  # jQuery实现类似老虎机滚动抽奖效果  # Android UI 实现老虎机详解及实例代码  # jquery 年会抽奖程序  # jQuery实现转动随机数抽奖效果的方法  # jquery实现九宫格大转盘抽奖  # jquery——九宫格大转盘抽奖实例  # jQuery+PHP实现的掷色子抽奖游戏实例  # 基于jQuery实现的双11天猫拆红包抽奖效果  # jQuery+PHP实现微信转盘抽奖功能的方法  # jquery转盘抽奖功能实现  # jQuery实现的老虎机跑动效果示例  # 会有  # 转化为  # 每隔  # 数据库中  # 的是  # 连接数据库  # 随机数  # 有个  # 是用来  # 找不到  # 请先  # 这两个  # 做一个  # 只显示  # 还需要  # 多种多样  # 可以看出  # 后将  # 设置为  # 转换成 

相关文章： 如何实现建站之星域名转发设置？  如何通过FTP服务器快速搭建网站？  ,巨量百应是干嘛的？  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  建站之星代理如何优化在线客服效率？  如何快速生成橙子建站落地页链接？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  存储型VPS适合搭建中小型网站吗？  小型网站建站如何选择虚拟主机？  定制建站哪家更专业可靠？推荐榜单揭晓  如何快速搭建高效简练网站？  建站之星如何取消后台验证码生成？  湖北网站制作公司有哪些,湖北清能集团官网？  C++中引用和指针有什么区别？（代码说明）  武汉外贸网站制作公司,现在武汉外贸前景怎么样啊？  如何在万网自助建站中设置域名及备案？  如何通过云梦建站系统实现SEO快速优化？  建站之星如何通过成品分离优化网站效率？  如何选择高效可靠的多用户建站源码资源？  如何选择高效响应式自助建站源码系统？  如何快速登录WAP自助建站平台？  如何选择高性价比服务器搭建个人网站？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  网站制作企业,网站的banner和导航栏是指什么？  建站之星后台密码如何安全设置与找回？  威客平台建站流程解析：高效搭建教程与设计优化方案  网站制作新手教程,新手建设一个网站需要注意些什么？  如何在IIS服务器上快速部署高效网站？  图册素材网站设计制作软件,图册的导出方式有几种？  在线教育网站制作平台,山西立德教育官网？  山东网站制作公司有哪些,山东大源集团官网？  h5在线制作网站电脑版下载,h5网页制作软件？  如何获取免费开源的自助建站系统源码？  如何通过主机屋免费建站教程十分钟搭建网站？  网站网页制作电话怎么打,怎样安装和使用钉钉软件免费打电话？  如何生成腾讯云建站专用兑换码？  C++中的Pimpl idiom是什么，有什么好处？（隐藏实现）  建站之星logo尺寸如何设置最合适？  如何用景安虚拟主机手机版绑定域名建站？  如何选择最佳自助建站系统？快速指南解析优劣  专业网站设计制作公司,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何通过宝塔面板实现本地网站访问？  已有域名和空间，如何快速搭建网站？  潮流网站制作头像软件下载,适合母子的网名有哪些？  ,网站推广常用方法？  如何用PHP工具快速搭建高效网站？  如何用腾讯建站主机快速创建免费网站？  制作表格网站有哪些,线上表格怎么弄？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  如何在云主机快速搭建网站站点？