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 相关文章推荐
JAVA/JSP学习系列之四
Oct 09 PHP
提问的智慧(2)
Oct 09 PHP
PHP 在线翻译函数代码
May 07 PHP
php 调试利器debug_print_backtrace()
Jul 23 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
Jun 12 PHP
用 Composer构建自己的 PHP 框架之基础准备
Oct 30 PHP
php约瑟夫问题解决关于处死犯人的算法
Mar 23 PHP
PHP变量赋值、代入给JavaScript中的变量
Jun 29 PHP
Yii模型操作之criteria查找数据库的方法
Jul 15 PHP
php获取当前url地址的方法小结
Jan 10 PHP
PHP十六进制颜色随机生成器功能示例
Jul 24 PHP
PHP的mysqli_set_charset()函数讲解
Jan 23 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编程 SSO详细介绍及简单实例
2017/01/13 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
python字典键值对的添加和遍历方法
2016/09/11 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python flask中静态文件的管理方法
2018/03/20 Python
python 定时修改数据库的示例代码
2018/04/08 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
Python urllib2运行过程原理解析
2020/06/04 Python
python和php学习哪个更有发展
2020/06/17 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
物流专业大学的自我评价
2014/01/11 职场文书
绿色城市实施方案
2014/03/19 职场文书
七夕活动策划方案
2014/08/16 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
浅析Django接口版本控制
2021/06/26 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL