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 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现鼠标滑动切换图片
May 27 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
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
八项规定整改措施
2014/02/12 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
领导欢迎词范文
2015/01/26 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
python删除csv文件的行列
2021/04/06 Python
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL