jQuery+PHP+Mysql实现抽奖程序

2020-05-22 16:08:00易采站长站整理

},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';