上述代码中，我们需要一个#roll用来显示滚动号码，#mid是用来记录抽中的号码id，然后就是需要两个按钮分别用来“开始”和“停止”动作，最后还需要一个#result显示抽奖结果。

CSS

我们使用简单的css来修饰html页面。

注意，我们默认将按钮#stop设置为display:none，是为了一开始只显示“开始”按钮，点击“开始”后，抽奖进行中，将显示“停止”按钮。

jQuery

我们首先要实现的是点击“开始”按钮，通过ajax从后台获取抽奖用的数据即手机号码，然后通过定时滚动显示手机号码，注意每次显示的手机号码是随机的，也就是说不是按照某种顺序出现的，我们看下面的代码：

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运行定时器，这样就达到了滚动显示抽奖号码的效果。同时显示“停止”按钮，隐藏“开始”按钮，这时抽奖进行中。

接下来看“停止”动作需要做的工作。

PHP;">

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或百度下。

data.PHP需要做两件事，一，通过连接数据库，读取手机号码信息(不包好已中奖号码)，然后通过转换成json格式输出给前端；二，通过接收前端请求，修改对应的数据库中的中奖号码状态，即标识该号码已中奖，下次将不再作为抽奖号码。

$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'],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程序就是操作数据库，然后返回对应的信息给前端。

最后将member表结构信息附上。

sql;">

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;

关于抽奖程序，根据不同的应用场合不同的需求，会有不同的表现形式。接下来我们会有文章讲述如何按照不同的概率实现的抽奖程序

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250