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

HTML

抽奖者自己决定选取其中的某一个方块,来完成抽奖的,所以我们在页面中放置6个方块,并且用1-6来表示不同的方块。

  1.  
    <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数据格式发送给前端页面。

先来看概率计算函数

  1.  
    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配置奖项。

  1.  
    $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个数数据给前端页面。

  1.  
    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相关插件:

  1.  
    <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> 

关于flip插件您可以到其官网:http://lab.smashup.it/flip/了解更多信息。

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

  1.  
    $(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个方块转动,将背面奖项信息显示出来。

  1.  
    $(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个方块,将奖品信息显示在对应的方块中。最终效果图:

为什么我抽不到大奖?

在很多类似的抽奖活动中,参与者往往抽不到大奖,笔者从程序的角度举个例给你看,假如我是抽奖活动的主办方,我设置了6个奖项,每个奖项不同的中奖概率,假如一等奖是一台高级轿车,可是我设置了其中奖概率为0,这意味着什么?这意味着参与抽奖者无论怎么抽,永远也得不到这台高级轿车。而当主办方每次翻动剩下的方块时,参与者会发现一等奖也许就在刚刚抽奖的方块旁边的一个数字下,都怪自己运气差。真的是运气差吗?其实在参与者翻动那个方块时程序已经决定了中奖项,而翻动查看其他方块看到的奖项只是一个烟雾弹,迷惑了观众和参与者。我想看完这篇文章后,您或许会知道电视节目中的翻板抽奖猫腻了,您也许大概再不会去机选双色球了。

关于可以连续翻动的bug,解决办法,在单击事件后,ajax前限制click事件插入代码:

  1. $("#prize li").unbind('click');
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>PHP+jQuery实现翻板抽奖</title>
  6. <link rel="stylesheet" type="text/css" href="../css/main.css" />
  7. <style type="text/css">
  8. .demo{width:620px; margin:60px auto; text-align:center}
  9. .demo p{height:60px}
  10. #prize{margin:10px auto}
  11. #prize li{float:left; width:200px; height:120px; line-height:120px; margin:1px; font-size:48px; text-align:center; color:#fff; cursor:pointer}
  12. #viewother,#repeat{height:40px; line-height:40px; text-align:center; font-size:16px; display:none}
  13. </style>
  14. <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
  15. <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
  16. <script type="text/javascript" src="jquery.flip.min.js"></script>
  17. <script type="text/javascript">
  18. $(function(){
  19. $("#prize li").each(function(){
  20. var p = $(this);
  21. var c = $(this).attr('class');
  22. p.css("background-color",c);
  23. p.click(function(){
  24. $("#prize li").unbind('click');
  25. $.ajax({
  26. type:'GET',
  27. url:'data.php',
  28. dataType:'json',
  29. cache:false,
  30. success:function(json){
  31. var prize = json.yes;
  32. p.flip({
  33. direction:'rl',
  34. content:prize,
  35. color:c,
  36. onEnd: function(){
  37. p.css({"font-size":"22px","line-height":"100px"});
  38. p.attr("id","r");
  39. $("#viewother").show();
  40. $("#prize li").unbind('click').css("cursor","default").removeAttr("title");
  41. }
  42. });
  43. $("#data").data("nolist",json.no);
  44. }
  45. });
  46. });
  47. });
  48. $("#viewother").click(function(){
  49. var mydata = $("#data").data("nolist"); //获取数据
  50. var mydata2 = eval(mydata);
  51.  
  52. $("#prize li").not($('#r')[0]).each(function(index){
  53. var pr = $(this);
  54. pr.flip({
  55. direction:'bt',
  56. color:'lightgrey',
  57. content:mydata2[index],
  58. onEnd:function(){
  59. pr.css({"font-size":"22px","line-height":"100px","color":"#333"});
  60. $("#viewother").hide();
  61. $("#repeat").show();
  62. }
  63. });
  64. });
  65. $("#data").removeData("nolist");
  66. });
  67. $("#repeat").click(function(){
  68. window.location.reload();
  69. });
  70. });
  71. </script>
  72. </head>
  73.  
  74. <body>
  75.  
  76. <div id="main">
  77.  
  78. <div class="demo">
  79. <p>一等奖:平板电脑,二等奖:数码相机,三等奖:音箱设备,四等奖:4G优盘,五等奖:10Q币<br/>点击数字方块,翻转即抽奖,快来试下你的手气吧。<br/>这只是一个示例,不要问我要奖品哦...</p>
  80. <ul id="prize">
  81. <li class="red" title="点击抽奖">1</li>
  82. <li class="green" title="点击抽奖">2</li>
  83. <li class="blue" title="点击抽奖">3</li>
  84. <li class="purple" title="点击抽奖">4</li>
  85. <li class="olive" title="点击抽奖">5</li>
  86. <li class="brown" title="点击抽奖">6</li>
  87. </ul>
  88. <div style="clear:both; margin-top:20px"><a href="javascript:void(0)" id="viewother">【翻开其他】</a><a href="javascript:void(0);" id="repeat">【再来一次】</a></div>
  89. <div id="data"></div>
  90. </div>
  91.  
  92. </div>
  93. <div id="footer">
  94. <p>Powered by helloweba.com 允许转载、修改和使用本站的DEMO,但请注明出处:<a href="http://www.helloweba.com">www.helloweba.com</a></p>
  95. </div>
  96.  
  97. </body>
  98. </html>
  1.  

PHP+jQuery实现翻板抽奖的更多相关文章

  1. PHP+jQuery实现翻板抽奖(中奖概率算法)

    在电视节目中有一种抽奖形式暂且叫做翻板抽奖,台上有一个墙面,墙面放置几个大方块,主持人或者抽奖者翻开对应的方块即可揭晓中奖结果.类似的抽奖形式还可以应用在WEB中,本文将使用PHP+jQuery为您讲 ...

  2. 幸运大转盘-jQuery+PHP实现的抽奖程序

    目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...

  3. jQuery+PHP掷色子抽奖

    原文 jQuery+PHP掷色子抽奖 本文以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽 ...

  4. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  5. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

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

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

  7. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  8. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  9. jquery输入数字随机抽奖特效

    简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果展示 http://hovertree.com/texiao ...

随机推荐

  1. Create local metadata resource of yum

    Today, I need install an oracle software for a machine whose os is Linux. As we all know, installing ...

  2. 网站服务管理系统wdcp简介及功能特性

    WDCP是WDlinux Control Panel的简称,是一套用PHP开发的Linux服务器管理系统以及虚拟主机管理系统,,旨在易于使用Linux系统做为我们的网站服务器,以及平时对Linux服务 ...

  3. .NET系统架构改造的经验和教训

    转自: http://robbinfan.com/blog/43/rid-off-dotnet-experience 在互联网行业,基于Unix/Linux的网站系统架构毫无疑问是当今主流的架构解决方 ...

  4. Android得到一个闹钟在第三方

    收集报警信息 闹铃时间,闹铃备注信息 闹铃引起系统变化的点: 1. Send Notification (正点闹钟能够设置不发送) 2. Play audio 闹铃信息结构体 ClockInfo{ S ...

  5. 十分钟让你明白Objective-C的语法(和Java、C++的对比)

    很多想开发iOS,或者正在开发iOS的程序员以前都做过Java或者C++,当第一次看到Objective-C的代码时都会头 疼,Objective-C的代码在语法上和Java, C++有着很大的区别, ...

  6. 3.数据库操作相关术语,Oracle认证,insert into,批量插入,update tablename set,delete和truncate的差别,sql文件导入

     1相关术语 语句 含义 操作 DML语句 (Data Manipulation Language) 数据库操作语言 insert update delete select DDL语言 (Date ...

  7. 卓尼斯ZT-180评測

    卓尼斯ZT-180评測    ——正在出差途中,用10”上网本发帖,没有拍照,且写得冲忙,不妥之处见谅. 一.採购 1.因外出旅游,不想带那台14"笔记本,所以想买一台平板电脑.当时,选择的 ...

  8. 总结一下.net framework适合装在哪些系统中

    最近在客户这部署,环境是windows server2003 service pack2.因为vs2012开发环境是.net framework4.5,所以发布iis的时候,尝试在sever2003上 ...

  9. Android Studio无法关联Api23源码-提示Souces for android api 23 platform not found

    最近升级了As,然后忽然就关联不上源码了,很不方便,找个Activity的源码都只有outline没有解释,还提示这个错误: Decompiled .class file, bytecode vers ...

  10. MVC 传参

    介绍一些View中常用的东西 1:传递参数: 1):路由协议中传递参数: 1):eg:比如是这样类似的路由协议,那么我们在传递参数的时候,就要传递 id过去,当然如果,ABCD= UrlParamet ...