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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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/01 无线电
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
Linux常见面试题
2013/03/18 面试题
开学季活动策划方案
2014/02/28 职场文书
环保建议书300字
2014/05/14 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
追悼会家属答谢词
2015/09/29 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
php实例化对象的实例方法
2021/11/17 PHP