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+pjax简单示例汇总
Apr 21 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现日历效果
Sep 11 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
摩卡咖啡
2021/03/03 咖啡文化
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
vue实现信息管理系统
2020/05/30 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python绘图实现显示中文
2019/12/04 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
终止合同协议书
2014/04/17 职场文书
保密协议书范本
2014/04/22 职场文书
幸福中国演讲稿
2014/09/12 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android