PHP+jQuery翻板抽奖功能实现


Posted in PHP onOctober 19, 2015

翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟练掌握jQuery和PHP相关知识。

PHP+jQuery翻板抽奖功能实现

HTML
与本站上篇文章不同的是,翻板抽奖不提供开始和结束抽奖按钮,抽奖者自己决定选取其中的某一个方块,来完成抽奖的,所以我们在页面中放置6个方块,并且用1-6来表示不同的方块。

<ul id="prize"> 
  <li class="red" title="点击抽奖">1</li> 
  <li class="green" title="点击抽奖">2</li> 
  <li class="blue" title="点击抽奖">3</li> 
  <li class="purple" title="点击抽奖">4</li> 
  <li class="olive" title="点击抽奖">5</li> 
  <li class="brown" title="点击抽奖">6</li> 
</ul> 
<div><a href="#" id="viewother">【翻开其他】</a></div> 
<div id="data"></div>

html结构中,我们使用一个无序列表放置6个不同的方块,每个li中的clas属性表示该方块的颜色,列表下面是一个链接a#viewother,用来完成抽奖后,点击它,翻看其他方块背面的中奖信息,默认是隐藏的。接下来还有一个div#data,它是空的,作用是用来临时存储未抽中的其他奖项数据,具体情况看后面的代码。为了让6个方块并排看起来舒服点,您还需要用CSS来美化下,具体可参照demo,本文中不再贴出css代码。
PHP
我们先完成后台PHP的流程,PHP的主要工作是负责配置奖项及对应的中奖概率,当前端页面点击翻动某个方块时会想后台PHP发送ajax请求,那么后台PHP根据配置的概率,通过概率算法给出中奖结果,同时将未中奖的奖项信息一并以JSON数据格式发送给前端页面。
先来看概率计算函数

function get_rand($proArr) { 
  $result = ''; 
 
  //概率数组的总概率精度 
  $proSum = array_sum($proArr); 
 
  //概率数组循环 
  foreach ($proArr as $key => $proCur) { 
    $randNum = mt_rand(1, $proSum); 
    if ($randNum <= $proCur) { 
      $result = $key; 
      break; 
    } else { 
      $proSum -= $proCur; 
    } 
  } 
  unset ($proArr); 
 
  return $result; 
}

上述代码是一段经典的概率算法,$proArr是一个预先设置的数组,假设数组为:array(100,200,300,400),开始是从1,1000这个概率范围内筛选第一个数是否在他的出现概率范围之内, 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间,在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的。这样筛选到最终,总会有一个数满足要求。就相当于去一个箱子里摸东西,第一个不是,第二个不是,第三个还不是,那最后一个一定是。这个算法简单,而且效率非常高,关键是这个算法已在我们以前的项目中有应用,尤其是大数据量的项目中效率非常棒。
接下来我们通过PHP配置奖项。

$prize_arr = array( 
  '0' => array('id'=>1,'prize'=>'平板电脑','v'=>1), 
  '1' => array('id'=>2,'prize'=>'数码相机','v'=>5), 
  '2' => array('id'=>3,'prize'=>'音箱设备','v'=>10), 
  '3' => array('id'=>4,'prize'=>'4G优盘','v'=>12), 
  '4' => array('id'=>5,'prize'=>'10Q币','v'=>22), 
  '5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>50), 
);

中是一个二维数组,记录了所有本次抽奖的奖项信息,其中id表示中奖等级,prize表示奖品,v表示中奖概率。注意其中的v必须为整数,你可以将对应的奖项的v设置成0,即意味着该奖项抽中的几率是0,数组中v的总和(基数),基数越大越能体现概率的准确性。本例中v的总和为100,那么平板电脑对应的中奖概率就是1%,如果v的总和是10000,那中奖概率就是万分之一了。
每次前端页面的请求,PHP循环奖项设置数组,通过概率计算函数get_rand获取抽中的奖项id。将中奖奖品保存在数组$res['yes']中,而剩下的未中奖的信息保存在$res['no']中,最后输出json个数数据给前端页面。

foreach ($prize_arr as $key => $val) { 
  $arr[$val['id']] = $val['v']; 
} 
 
$rid = get_rand($arr); //根据概率获取奖项id 
 
$res['yes'] = $prize_arr[$rid-1]['prize']; //中奖项 
unset($prize_arr[$rid-1]); //将中奖项从数组中剔除,剩下未中奖项 
shuffle($prize_arr); //打乱数组顺序 
for($i=0;$i<count($prize_arr);$i++){ 
  $pr[] = $prize_arr[$i]['prize']; 
} 
$res['no'] = $pr; 
echo json_encode($res);

直接输出中奖信息就得了,为何还要把未中奖的信息也要输出给前端页面呢?请看后面的前端代码。
jQuery
首先为了实现翻板效果,我们需要预先加载翻动插件及jquery,jqueryui相关插件:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.flip.min.js"></script>

接下来,我们通过单击页面中的方块,来完成抽奖行为。

$(function(){ 
  $("#prize li").each(function(){ 
    var p = $(this); 
    var c = $(this).attr('class'); 
    p.css("background-color",c); 
    p.click(function(){ 
      $("#prize li").unbind('click'); 
      $.getJSON("data.php",function(json){ 
        var prize = json.yes; //抽中的奖项 
        p.flip({ 
          direction:'rl', //翻动的方向rl:right to left 
          content:prize, //翻转后显示的内容即奖品 
          color:c, //背景色 
          onEnd: function(){ //翻转结束 
            p.css({"font-size":"22px","line-height":"100px"}); 
            p.attr("id","r"); //标记中奖方块的id 
            $("#viewother").show(); //显示查看其他按钮 
            $("#prize li").unbind('click') 
            .css("cursor","default").removeAttr("title"); 
          } 
        }); 
        $("#data").data("nolist",json.no); //保存未中奖信息 
      }); 
    }); 
  }); 
});

代码中先遍历6个方块,给每个方块初始化不同的背景颜色,单击当前方块后,使用$.getJSON向后台data.php发送ajax请求,请求成功后,调用flip插件实现翻转方块,在获取的中奖信息显示在翻转后的方块上,翻转结束后,标记该中奖方块id,同时冻结方块上的单击事件,即unbind('click'),目的就是让抽奖者只能抽一次,抽完后每个方块不能再翻动了。最后将未抽中的奖项信息通过data()储存在#data中。
其实到这一步抽奖工作已经完成,为了能查看其他方块背面究竟隐藏着什么,我们在抽奖后给出一个可以查看其他方块背面的链接。通过点击该链接,其他5个方块转动,将背面奖项信息显示出来。

$(function(){ 
  $("#viewother").click(function(){ 
    var mydata = $("#data").data("nolist"); //获取数据 
    var mydata2 = eval(mydata);//通过eval()函数可以将JSON转换成数组 
       
    $("#prize li").not($('#r')[0]).each(function(index){ 
      var pr = $(this); 
      pr.flip({ 
        direction:'bt', 
        color:'lightgrey', 
        content:mydata2[index], //奖品信息(未抽中) 
        onEnd:function(){ 
          pr.css({"font-size":"22px","line-height":"100px","color":"#333"}); 
          $("#viewother").hide(); 
        } 
      }); 
    }); 
    $("#data").removeData("nolist"); 
  }); 
});

当单击#viewother时,获取抽奖时保存的未抽中的奖项数据,并将其转化为数组,翻转5个方块,将奖品信息显示在对应的方块中。最终效果图:

PHP+jQuery翻板抽奖功能实现

我想看完这篇文章后,大家或许就会知道电视节目中的翻板抽奖猫腻了,可能再不会参与了。

总之,希望大家可以从小编整理的这篇文章中有所收获,对大家学习php编程有所帮助。

PHP 相关文章推荐
傻瓜化配置PHP环境――Appserv
Dec 13 PHP
php的字符串用法小结
Jun 08 PHP
php过滤XSS攻击的函数
Nov 12 PHP
Yii实现自动加载类地图的方法
Apr 01 PHP
基于命令行执行带参数的php脚本并取得参数的方法
Jan 25 PHP
php简单创建zip压缩文件的方法
Apr 30 PHP
详解EventDispatcher事件分发组件
Dec 25 PHP
Zend Framework基于Command命令行建立ZF项目的方法
Feb 18 PHP
PHP信号处理机制的操作代码讲解
Apr 19 PHP
因str_replace导致的注入问题总结
Aug 08 PHP
laravel 自定义常量的两种方案
Oct 14 PHP
laravel接管Dingo-api和默认的错误处理方式
Oct 25 PHP
php生成动态验证码gif图片
Oct 19 #PHP
php批量删除超链接的实现方法
Oct 19 #PHP
php二维码生成
Oct 19 #PHP
部署PHP时的4个配置修改说明
Oct 19 #PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
Oct 19 #PHP
基于PHP实现假装商品限时抢购繁忙的效果
Oct 16 #PHP
php如何连接sql server
Oct 16 #PHP
You might like
PHP学习之数组值的操作
2011/04/17 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python中time、datetime模块的使用
2020/12/14 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
运动会100米解说词
2014/01/23 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
幼儿评语大全
2014/04/30 职场文书
win7配置本地ftp服务器的图文教程
2022/08/05 Servers