抽奖程序在实际生活中广泛运用，由于应用场景不同抽奖的方式也是多种多样的。本文将采用实例讲解如何利用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);
