php mysql 抽奖_使用jQuery+PHP+Mysql实现抽奖程序
HTML
上述代码中,我们需要一个#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("
"+mobile+"
"); } 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;
关于抽奖程序,根据不同的应用场合不同的需求,会有不同的表现形式。接下来我们会有文章讲述如何按照不同的概率实现的抽奖程序,敬请关注helloweba.com。
php mysql 抽奖_使用jQuery+PHP+Mysql实现抽奖程序相关推荐
- html5 mysql 展示_基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
本文用示例讲述了如何使用jQuery与PHP及Mysql结合,实现WEB版在线拍照.上传.显示浏览的功能,ajax交互技术贯穿本文始末,所以本文的读者要求具备相当熟悉jQuery及其插件使用和javs ...
- php mysql抽奖程序_使用jQuery+PHP+Mysql实现抽奖程序
抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的.本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序. 本例中的抽奖程序要实现从海量 ...
- 打开和关闭mysql服务器_启动和关闭MySQL服务器
欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入 作为MySQL管理员,一个普通的目标就是确保服务器尽可能地处于运行状态,使得客户机能够随时访问它.但是,有时最好关闭服务器 ...
- golang mysql 崩溃_使用GoLang与mysql连接失败
我试图使用Go语言连接MySql数据库并给我以下错误. sql: unknown driver "mysql" (forgotten import?) 我的守则 package m ...
- 零点起飞学mysql视频_零点起飞学MySQL
第1篇 MySQL基础 第1章 数据库的安装(教学视频:25分钟) 2 1.1 MySQL概述 2 1.1.1 MySQL特性以及历史 2 1.1.2 MySQL的获取 3 1.2 MySQL的安装 ...
- centos 查看mysql 服务器配置_在CentOS上MySQL数据库服务器配置方法
http://www.jb51.net/article/23255.htm ======================== 1 . 无密码登录: mysql -u root 在已经有密码的情况下报错 ...
- redis失效了mysql扛不住_我是Redis,MySQL大哥被我害惨了!
我是Redis 你好,我是Redis,一个叫Antirez的男人把我带到了这个世界上. 说起我的诞生,跟关系数据库MySQL还挺有渊源的. 在我还没来到这个世界上的时候,MySQL过的很辛苦,互联网发 ...
- sysbench mysql测试_使用sysbench对MySQL进行测试
为什么要测试,测什么东西? 测试的种类非常多,测试的目的也非常多,我这里主要的目的就两个 测试MySQL的极限IO 对比不同版本MySQL,不同参数, 不同硬件,不同系统对MySQL的性能影响 为什么 ...
- 远程访问mysql数据库_关于远程连接MySQL数据库的问题解决
安装MySQL sudo apt-get install mysql-server 这个应该很简单了,而且我觉得大家在安装方面也没什么太大问题,所以也就不多说了,下面我们来讲讲配置. 配置MySQL ...
最新文章
- python集合用法详解(创建、添加(add()、update())、删除(remove()、discard()、pop())、查找(in、not in))
- python 今日头条 控制手机_千米矿井开5G无人运矿车像打游戏今日头条手机光明网...
- 万万没想到,钉钉居然是个AI平台
- 通过全备+relaylog同步恢复被drop的库或表
- NO.104使用禅道创建和评审需求
- 用计算机弹生僻字乐谱,生僻字 E调 (拇指琴卡林巴琴弹奏谱)_谱友园地_中国曲谱网...
- markdown 生成目录_github上如何为markdown文件生成目录
- Pandas 中 把Dataframe 格式转化为 array 数组
- [FZYZOJ 1202] 金坷垃
- java8 lambda表达式Stream对List常用操作总结
- gc buffer busy release
- Python编程:从入门到实践 11-3
- 利用Proteus 8.9运行stm32最简单的跑马灯程序
- 回溯法求解TSP问题(旅行商问题)
- ArcGIS在洪水普查、风险评估及区划应用
- 2022年金砖国家职业技能大赛(决赛)网络空间安全赛项 | 浙江赛区选拔赛 任务书
- JavaScript对象的取值
- 国内外可用的知识图谱资源
- EntityFramework笔记
- 如何修改wincc服务器画面,关于OS站的wincc画面修改的问题-工业支持中心-西门子中国...
热门文章
- 大隐隐于市,你身边的那些安全隐患你都知道么?
- vue2入门----父传子/子传父/兄弟相传
- Xocde 12 pod 库 模拟器 library not found for -xxx解决办法
- InDesign 教程:如何链接图形?
- ramdisk介绍与制作
- R语言使用runif函数生成符合均匀分布的随机数、使用plot函数可视化符合均匀分布的随机数(Uniform Distribution)
- 电子MES生产管理系统,车间条码生产管理系统解决方案
- u盘文件误删怎么恢复,迅龙数据恢复
- vspy怎么增加保存的报文条数_美国英特佩斯控制系统 » VSpy3中记录数据的方法...
- 软件IIC通信以及源码解析(如何使用)