经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
jquery+h5实现九宫格抽奖特效（前后端代码）
来源：jb51　　时间：2021/8/16 16:34:49　　对本文有异议

前言：

前端：jq+h5 实现九宫格动效

后端：thinkphp3.2.3 实现中奖概率算法

功能：支持读取数据库预设的中奖率及奖品池，中奖率可以自定义，必须是整数

最终效果如下：

代码：

choujiang.html代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="武当山道士" />
  6. <title>九宫格抽奖转盘</title>
  7. <style type="text/css">
  8. .container{width:100%;height:auto;line-height: 100%;text-align: center;}
  9. #lottery{width:425px;height:425px;margin:auto;background:#e5e5e5;}
  10. #lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999;
  11.  
  12. }
  13. /*#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}*/
  14. #lottery table td.active{background-color:#fff333;border-radius: 10px;}
  15.  
  16. #start {color:white;background:orange;
  17.  border-radius: 10px;
  18.  height:130px;
  19.  line-height: 130px;
  20.  width:130px;
  21.  margin: auto;
  22.  /*margin: 10% 10% 10% 10%;*/
  23.  text-align: center;
  24.  display: block;
  25.  text-decoration: none;
  26. }
  27. #con_prize{display: none;margin-top: 10px;}
  28. #pname{color:red;margin-left: 5px;margin-right: 10px;font-size: 20px;}
  29. .prize{background:#000 ;opacity: 0.5;
  30.  height:130px;width: 130px;
  31.  border-radius: 5px;margin: auto;line-height: 130px;
  32.  text-shadow: 1px 1px 2px;
  33. }
  34. .on{opacity: 1;color:#fff;background: #a5a5d1}
  35. </style>
  36. </head>
  37. <body>
  38. <div class="container">
  39.  <div id="lottery">
  40.      <table border="0" cellpadding="0" cellspacing="0" style="background:#e3f4a1">
  41.          <tr>
  42.              <td class="lottery-unit lottery-unit-0"><div class="prize prize-0">安慰奖</div></td>
  43.              <td class="lottery-unit lottery-unit-1"><div class="prize prize-1">玩具车</div></td>
  44.              <td class="lottery-unit lottery-unit-2"><div class="prize prize-2">自行车</div></td>
  45.          </tr>
  46.          <tr>
  47.              <td class="lottery-unit lottery-unit-7"><div class="prize prize-7">奥迪</div></td>
  48.              <td ><a href="#" rel="external nofollow" class = "lottery-unit" id="start">开始抽奖</a></td>
  49.              <td class="lottery-unit lottery-unit-3"><div class="prize prize-3">电动车</div></td>
  50.          </tr>
  51.          <tr>
  52.              <td class="lottery-unit lottery-unit-6"><div class="prize prize-6">夏利</div></td>
  53.              <td class="lottery-unit lottery-unit-5"><div class="prize prize-5">拖拉机</div></td>
  54.              <td class="lottery-unit lottery-unit-4"><div class="prize prize-4">摩托</div></td>
  55.          </tr>
  56.      </table>
  57.  </div>
  58.  <div id="con_prize" data-pname="长宜太盛100元优惠券" data-pid="1">恭喜您获得奖品：<span id="pname"></span><button onclick="getPrize()">领取奖品</button></div>
  59. </div>
  60.  
  61. <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  62. <script type="text/javascript">
  63.  
  64.  
  65.         var lottery={
  66.                 index:-1,    //当前转动到哪个位置，起点位置
  67.                 count:8,    //总共有多少个奖品位置，9宫格就是8个奖品位置
  68.                 timer:0,    //setTimeout的ID，用clearTimeout清除
  69.                 speed:10,    //初始转动速度
  70.                 times:0,    //转动次数
  71.                 cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
  72.                 prize:0,    //默认中奖位置，放默认奖品
  73.                 init:function(id){
  74.                         if ($("#"+id).find(".lottery-unit").length>0) {
  75.                                 $lottery = $("#"+id);
  76.                                 $units = $lottery.find(".lottery-unit");
  77.                                 this.obj = $lottery;
  78.                                 this.count = $units.length;
  79.                                 $lottery.find(".prize-"+this.index).addClass("on");
  80.                         };
  81.                 },
  82.                 roll:function(){
  83.                         var index = this.index;
  84.                         var count = this.count;
  85.                         var lottery = this.obj;
  86.                         $(lottery).find(".prize-"+index).removeClass("on");
  87.                         index += 1;
  88.                         if (index>count-1) {
  89.                             index = 0;
  90.                         };
  91.                         $(lottery).find(".prize-"+index).addClass("on");
  92.                         this.index=index;
  93.                         return false;
  94.                     },
  95.                stop:function(index){
  96.                         this.prize=index;
  97.                         return false;
  98.                     }
  99.         };
  100.  
  101.         //存储奖品信息
  102.         var prize_data = {
  103.          pname:'默认奖品',    //奖品名称
  104.             pnum:0,    //中奖位置 默认0，重要，转盘据此来定位获奖商品
  105.             pid:1,    //奖品id 默认1
  106.         };
  107.  
  108.         
  109.         function roll(){
  110.             lottery.times += 1;
  111.             lottery.roll();
  112.             
  113.             if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
  114.                 clearTimeout(lottery.timer);
  115.                 lottery.times=0;
  116.                 click=false;
  117.                 //显示中奖信息
  118.                 showDetail();
  119.             }else{
  120.              //速度控制
  121.                 if (lottery.times<lottery.cycle) {
  122.                     lottery.speed -= 10;
  123.                 }else if(lottery.times==lottery.cycle) {
  124.                     index = lottery.prize;     
  125.                 }else{
  126.                     if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
  127.                         lottery.speed += 110;
  128.                     }else{
  129.                         lottery.speed += 20;
  130.                     }
  131.                 }
  132.                 if (lottery.speed<40) {
  133.                     lottery.speed=40;
  134.                 };
  135.                 //延时递归调用
  136.                 lottery.timer = setTimeout(roll,lottery.speed);
  137.                 
  138.             }
  139.             
  140.             return false;
  141.         }
  142.         /*
  143.    * 获取中奖位置
  144.    * @param {string} name 用户昵称（必须）
  145.    * @param {string} avatar 微信头像网址（必须）
  146.    * @param {string} openid 微信openid（必须，用于验证唯一性，一个用户只能抽奖一次）
  147.    * @return {bool} 
  148.    */
  149.   function doRoll(url,name,avatar,openid){
  150.    $.ajax({ url: url, data:{name:name,avatar:avatar,openid:openid}, async:false,dataType:'json',success: function(rst){
  151.     lottery.speed=100;
  152.           var data = rst.data;
  153.           
  154.           lottery.prize = data.pnum;
  155.           prize_data = {
  156.                   pname:data.pname,
  157.                   pnum:data.pnum,
  158.                   pid:data.pid
  159.                  };
  160.                 roll();
  161.                 click=true;
  162.                 return false;
  163.  
  164.         }});
  165.   }
  166.  
  167.         //领奖(跳转收货地址页面，或者弹出收货地址页面)
  168.         function getPrize(){
  169.          alert("请填写收货地址");
  170.         }
  171.         //清空中奖信息
  172.         function clearDetail(){
  173.          $("#con_prize").hide();
  174.             $("#pname").html("");
  175.         }
  176.         //显示中奖信息
  177.         function showDetail(){
  178.          $("#con_prize").show();
  179.             $("#pname").html(prize_data.pname);
  180.         }
  181.  
  182.         var click=false;
  183.  
  184.         window.function(){
  185.          var url = 'http://test.com/api/Shop/ex/';//这里改成实际后台抽奖接口
  186.             lottery.init('lottery');
  187.             $("#start").click(function(){
  188.                 if (click) {
  189.                     return false;
  190.                 }else{
  191.                  clearDetail();
  192.                  doRoll(url,"name","avatar","openid");
  193.                 }
  194.             });
  195.         };
  196.  
  197. </script>
  198. </body>
  199. </html>

thinkphp接口代码如下：

  1. namespace Api\Controller;
  2. use Think\Controller;
  3. class ShopController Extends Controller{
  4.  /**
  5.      * 抽奖后台接口
  6.      * @author 武当山道士
  7.      */
  8.     
  9.      public function ex(){
  10.         $nick = I('nick','','trim');
  11.         $avatar = I('avatar','','trim');
  12.         $openid = I('openid','','trim');
  13.         //if(empty($nick)) $this->error('empty nick');
  14.         //if(empty($avatar)) $this->error('empty avatar');
  15.         //if(empty($openid)) $this->error('empty openid');
  16.         /*自己封装的error函数，正常应该这样写：
  17.         $this->ajaxReturn(array(
  18.           'data'=>'',
  19.           'info'=>$info,
  20.           'status'=>$status
  21.          ));*/
  22.          
  23.         //初始化奖品池，8个奖品，满概率100，最小概率为1(id,name以实际数据库取出的数据为准，percent之和等于100)
  24.         $arr8 = array(
  25.             array("id"=>1,"name"=>"安慰奖","percent"=>69),
  26.             array("id"=>2,"name"=>"玩具车","percent"=>10),
  27.             array("id"=>3,"name"=>"自行车","percent"=>6),
  28.             array("id"=>4,"name"=>"电动车","percent"=>5),
  29.             array("id"=>5,"name"=>"摩托","percent"=>4),
  30.             array("id"=>6,"name"=>"拖拉机","percent"=>3),
  31.             array("id"=>7,"name"=>"夏利","percent"=>2),
  32.             array("id"=>8,"name"=>"奥迪","percent"=>1),
  33.             );
  34.         //下标存储数组100个下表，0-7 按概率分配对应的数量
  35.         $indexArr = array();
  36.         for($i=0;$i<sizeof($arr8);$i++){
  37.             for($j=0;$j<$arr8[$i]['percent'];$j++){
  38.                 //index 追加到数组indexArr
  39.                 array_push($indexArr, $i);
  40.             }
  41.         }
  42.         //数组乱序
  43.         shuffle($indexArr);
  44.         //从下标数组中随机取一个下标作为中奖下标，$rand_index 是$indexArr的随机元素的下标（0-99）
  45.         $rand_index = array_rand($indexArr,1);
  46.         //获取中奖信息
  47.         $prize_index = $indexArr[$rand_index];
  48.         $prizeInfo = $arr8[$prize_index];
  49.  
  50.         
  51.         $data['pnum'] = $prize_index;//对应前端奖品编号
  52.         $data['pid'] = $prizeInfo['id'];
  53.         $data['pname'] = $prizeInfo['name'];
  54.         $this->success($data);/*自己封装的success，正常应该这样写 
  55.         $this->ajaxReturn(array(
  56.           'data'=>$data,
  57.           'info'=>'成功',
  58.           'status'=>1
  59.          ));*/
  60.     }
  61.     
  62. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号