• 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 诗经讲演录:男子如何从好色转为好德? 2019-05-10
  • 中国外交部:就朝美领导人会晤发表声明 2019-05-06
  • 报道新闻记录历史 70载人民日报见证中国发展大事 2019-05-06
  • 浙江小学生北大行 梦想教育从小开始 2019-04-27
  • 欢迎访问

    彩票开奖:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    DING HAO COLUMN 鼎浩专栏

    鼎浩的一些分享
    Sharing from Ding Hao

    使用jQuery+PHP+Mysql实现抽奖程序

    来源:云南11选五走势图500期     2013年07月02日17:02
    字号:T|T

    云南11选五走势图500期 www.a-mcl.com 抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的。本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序。

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

    查看演示DEMO

    HTML

    
    

    上述代码中,我们需要一个#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);
    				},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("

    "+mobile+"

    "); } 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';
    	}
    }
    

    我们可以看出,数据表member中有个字段叫status,这个字段是用来标识是否中奖。1表示已中奖,0表示未中奖。这个后台php程序就是操作数据库,然后返回对应的信息给前端。

    MYSQL

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

    
    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;
    

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

    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心
  • 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 诗经讲演录:男子如何从好色转为好德? 2019-05-10
  • 中国外交部:就朝美领导人会晤发表声明 2019-05-06
  • 报道新闻记录历史 70载人民日报见证中国发展大事 2019-05-06
  • 浙江小学生北大行 梦想教育从小开始 2019-04-27