jQuery+PHP+Mysql实现抽奖程序


Posted in jQuery onApril 12, 2020

抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的。本文将采用实例讲解如何利用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 相关文章推荐
jQuery返回定位插件详解
May 15 jQuery
jQuery表单验证之密码确认
May 22 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
JQuery实现定时刷新功能代码
May 09 #jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
jquery replace方法去空格
May 08 #jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 #jQuery
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python入门教程之if语句的用法
2015/05/14 Python
使用Python写CUDA程序的方法
2017/03/27 Python
python编写弹球游戏的实现代码
2018/03/12 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
python调用百度API实现人脸识别
2020/11/17 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
活动志愿者自荐信
2014/01/27 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015年度保密工作总结
2015/04/24 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Linux中各个目录的作用与内容
2022/06/28 Servers
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python