jQuery PHP Mysql实现抽奖程序

抽奖程序在现实生活中应用广泛，由于应用场景不同，抽奖方式也多种多样。本文将用一个例子来说明如何使用jQuery PHP MySQL实现一个电视中常见的简单抽奖程序。

查看演示文稿

在这个例子中，抽奖程序应该一次从大量的手机号码中随机选择一个号码作为中奖号码，并且可以进行多次抽奖，抽取的号码不会再次被抽取。抽奖过程：点击“开始”按钮后，程序获取号码信息并滚动号码。点击“停止”按钮时，数字停止滚动，显示的数字即为中奖号码。您可以点击“开始”按钮继续抽奖。

超文本标记语言

div id='roll'/Div输入类型=' hidden ' id=' mid ' value=' pin put type=' button ' class=' BTN ' id=' start ' value=' start '输入类型=' button ' class=' BTN ' id=' stop ' value=' stop '/P Div id=' result '/Div在上面的代码中，我们需要一个#roll来显示滚动的数字，一个#mid来记录抽取的数字id，然后两个按钮分别来“start”和“stop”，最后一个#result来显示抽奖结果。

半铸钢钢性铸铁(Cast Semi-Steel)

我们使用简单的css来装饰html页面。演示{ width:300pxmargin:60px汽车；text-align : center } # roll { height :32 px；线高：32 px；font-size :24 px；color:#f30}。btn { width:80px高度：26 px；线高：26 px；background : URL(BTN _ BG . gif)repeat-x；border:1px固体# d3d3d3cursor : pointer } # stop { display : none } # result { margin-top :20 px；线高：24 px；font-size :16 px；Text-align:center}注意，默认情况下，我们将#stop按钮设置为display:none，这样开始时只会显示“start”按钮。点击“开始”后，抽奖将进行中，并显示“停止”按钮。

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字符串转换为object var len=obj.length_ gogo=setInterval(function(){ var num=math . floor(math . random()* len)；//获取随机数var id=obj[num][' id ']；//random 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字符串转换为object 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 ')。追加(' p ' mobile '/p ')；} stop _ BTN . hide()；start _ BTN . show()；});});当你点击“停止”按钮时，意味着抽奖结束。使用clearInterval()函数停止计时器，获取所绘制数字的id，然后通过$.post将所选数字id发送到后台data.php，所绘制的数字应该在数据库中进行标记。如果后台处理成功，前端会将中奖号码加入到中奖结果中，隐藏“停止”按钮，显示“开始”按钮，这样就可以再次抽奖了。

请注意，我们使用setInterval()和clearInterval()来设置计时器和停止计时器。你可以在谷歌或者百度下使用这两个功能。

服务器端编程语言（Professional Hypertext Preprocessor的缩写）

Data.php需要做两件事。首先通过连接数据库，读取手机号码信息(不包括中奖号码)，然后转换成json格式输出到前端；第二，通过接收前端请求，修改中奖号码在对应数据库中的状态，即识别该号码已经中奖，下次不会作为彩票号码使用。

include _ once(' connect . PHP ')；//连接数据库$ action=$ _ GET[' action ']；If($action==''){ //读取数据并返回JSON $ query=MySQL _ query('从成员中选择*其中状态=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='更新成员集状态=1，其中id=$ id '；$ query=MySQL _ query($ SQL)；if($ query){ echo ' 1 '；}}我们可以看到数据表成员中有一个字段叫做status，用来标识是否中奖。1表示赢，0表示不赢。这个后台php程序操作数据库，然后将相应的信息返回给前端。

关系型数据库

最后附上成员表的结构信息。

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；关于彩票节目，根据不同的应用和需求，会有不同的表现形式。接下来，我们会有一篇关于如何根据不同概率实现抽奖程序的文章

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。