jQuery + PHP + Mysql如何实现抽奖程序

　　介绍

小编这次要给大家分享的是jQuery + PHP + Mysql如何实现抽奖程序,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的。本文将采用实例讲解如何利用jQuery + PHP + Mysql实现类似电视中常见的一个简单的抽奖程序。

癹Query

<强>查看演示

本例中的抽奖程序要实现从海量手机号码中一次随机抽取一个号码作为中奖号码,可以多次抽奖,被抽中的号码将不会被再次抽中。抽奖流程:点击“开始”按钮后,程序获取号码信息,滚动显示号码,当点击“停止”按钮后,号码停止滚动,这时显示的号码即为中奖号码,可以点击“开始”按钮继续抽奖。

<强> HTML

& lt; div id=皉oll"祝辞& lt;/div> & lt;输入类型=癶idden"id=癿id"https://www.yisu.com/zixun/value=" "> 　　

　　
　　

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

<强> CSS

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

.demo{宽度:300 px;保证金:60 px汽车;text-align:中心} 　　#卷{高度:32像素;行高:32像素;字体大小:24 px;颜色:# + 30} 　　.btn{宽度:80 px;高度:26 px;行高:26 px;背景:url (btn_bg.gif) 　　repeat-x;边界:1 px固体# d3d3d3;光标:指针} 　　#停止{显示:没有} 　　#结果{margin-top: 20 px;行高:24 px;字体大小:16 px;text-align:中心} 　　

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

<强> jQuery

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

$(函数(){ 　　var _gogo; 　　var start_btn=$(“#时); 　　var stop_btn=$ (“# stop"); 　　 　　start_btn.click(函数(){ 　　美元.getJSON (& # 39; data.php& # 39;,函数(json) { 　　如果(json) { 　　var obj=eval (json);//将json字符串转化为对象 　　var len=obj.length; 　　_gogo=setInterval(函数(){ 　　var num=Math.floor (math . random () * len);//获取随机数 　　var id=obj [num] [& # 39; id # 39;];//随机id 　　var v=obj [num][& # 39;移动# 39;];//对应的随机号码 　　$ (“# roll") . html (v); 　　$ (“# mid") .val (id); 　　},100);//每隔0.1秒执行一次 　　stop_btn.show (); 　　start_btn.hide (); 　　其他}{ 　　$ (“# roll") . html(& # 39;系统找不到数据源,请先导入数据# 39;公司); 　　} 　　}); 　　}); 　　}); 　　

首先我们定义变量,方便后续调用。然后,当点击“开始”按钮后,页面向后台data.php发送Ajax请求,这里我们使用jqeury的getJSON来完成异步请求。当后台返回json数据时,我们通过通过eval()函数可以将json字符串转化为对象obj,其实就是将json数据转换为数组了。这时,我们使用setInterval做一个定时器,定时器里需要做的工作是:随机获取数组obj中的手机号码信息,然后显示在页面上。然后每隔0.1运行定时器,这样就达到了滚动显示抽奖号码的效果,同时显示“停止”按钮,隐藏”开始”按钮,这时抽奖进行中。

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

 stop_btn.click(函数(){
　　clearInterval (_gogo);
　　var=$ (“# mid")中期.val ();
　　$ . post (“data.php& # 63;行动=ok", {id:中期},函数(msg) {
　　如果(味精==1){
　　移动=$ var (“# roll") . html ();
　　$ (“# result") .append (“& lt; p>“+移动+“& lt;/p>“);
　　}
　　stop_btn.hide ();
　　start_btn.show ();
　　});
　　});
　　

当单击“停止”按钮,意味着抽奖结束。使用clearInterval()函数停止定时器,获取被抽中号码的id,然后通过$ . post将选中号id码发送给后台data.php处理。应为被抽中的号码需要在数据库中标记。如果后台处理成功,前端将中奖号码追加到中奖结果中,同时隐藏“停止”按钮,显示“开始”按钮,可以再次抽奖了。

jQuery + PHP + Mysql如何实现抽奖程序