jQuery+PHP实现微信转盘抽奖功能的方法


Posted in Javascript onMay 25, 2016

本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法。分享给大家供大家参考,具体如下:

本文结合实例将使用jQuery和PHP来实现转盘抽奖程序。

准备工作

首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片。

接着制作html页面,实例中我们在body中加入如下代码:

<div class="demo">
  <div id="disk"></div>
  <div id="start"><img src="start.png" id="startbtn"></div>
</div>

我们用#disk来放置圆盘背景图片,在css中控制,用#start来放置指针图片start.png。

然后我们使用CSS来控制指针和圆盘的位置,代码如下:

.demo{width:417px; height:417px; position:relative; margin:50px auto} #disk{width:417px; height:417px; background:url(disk.jpg) no-repeat} #start{width:163px; height:320px; position:absolute; top:46px; left:130px;} #start img{cursor:pointer}

jQuery

要想让指针转动起来,如果不借助flash的话,我们可以使用html5的canvas实现图片的旋转,但是需要考虑浏览器兼容性,而一款jQuery插件完全可以实现图片(任意html元素)旋转并兼容各大浏览器,它就是jQueryRotate.js。

使用jQueryRotate.js可以将图片旋转任意角度,可以绑定鼠标事件,可以设置旋转过程动画效果以及callback回调函数。

使用方法当然是先在head中载入jquery库文件以及jQueryRotate.js,然后我们使用以下代码就可以实现指针转动了。

$(function(){
  $("#startbtn").rotate({
    bind:{
      click:function(){//绑定click单击事件
         var a = Math.floor(Math.random() * 360); //生成随机数
         $(this).rotate({
             duration:3000,//转动时间间隔(转动速度)
             angle: 0, //开始角度
            animateTo:3600+a, //转动角度,10圈+
            easing: $.easing.easeOutSine, //动画扩展
            callback: function(){ //回调函数
              alert('中奖了!');
            }
         });
      }
    }
  });
});

上面的代码实现了:当单击指针“开始抽奖”按钮,指针开始转动,转动角度为3600+a,即10圈后再转动随机产生的a角度,当转动角度到达3600+a度时停止转动。

PHP

首先,我们根据抽奖圆盘上的奖项设置对应角度和中奖几率,我们在data.php中构建一个多维数组:

$prize_arr = array(
  '0' => array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等奖','v'=>1),
  '1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等奖','v'=>2),
  '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等奖','v'=>5),
  '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等奖','v'=>7),
  '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等奖','v'=>10),
  '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等奖','v'=>25),
  '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332),
'max'=>array(58,118,178,238,298,358),'prize'=>'七等奖','v'=>50)
);

数组$prize_arr,id用来标识不同的奖项,min表示圆盘中各奖项区间对应的最小角度,max表示最大角度,如一等奖对应的最小角度:0,最大角度30,这里我们设置max值为1、max值为29,是为了避免抽奖后指针指向两个相邻奖项的中线。由于圆盘中设置了多个七等奖,所以我们在数组中设置每个七等奖对应的角度范围。prize表示奖项内容,v表示中奖几率,我们会发现,数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推。

关于中奖概率算法

function getRand($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;
}

函数getRand()会根据数组中设置的几率计算出符合条件的id,我们可以接着调用getRand()。

foreach ($prize_arr as $key => $val) {
  $arr[$val['id']] = $val['v'];
}
$rid = getRand($arr); //根据概率获取奖项id
 $res = $prize_arr[$rid-1]; //中奖项 $min = $res['min'];
$max = $res['max'];
if($res['id']==7){ //七等奖
  $i = mt_rand(0,5);
  $result['angle'] = mt_rand($min[$i],$max[$i]);
}else{
  $result['angle'] = mt_rand($min,$max); //随机生成一个角度
  }
$result['prize'] = $res['prize'];
echo json_encode($result);

代码中,我们调用getRand(),获得通过概率运算后得到的奖项,然后根据奖项中配置的角度范围,在最小角度和最大角度间生成一个角度值,并构建数组,包含角度angle和奖项prize,最终以json格式输出。

jQuery

在上文的基础上,我们对前端jQuery代码进行改造,当点击“开始抽奖”按钮后,向后台data.php发送一个ajax请求,如果请求成功并返回奖项信息,则转动指针,将指针最终指向位置转动到data.php返回的角度值。

$(function(){
   $("#startbtn").click(function(){
    lottery();
  });
});
function lottery(){
  $.ajax({
    type: 'POST',
    url: 'data.php',
    dataType: 'json',
    cache: false,
    error: function(){
      alert('出错了!');
      return false;
    },
    success:function(json){
      $("#startbtn").unbind('click').css("cursor","default");
      var a = json.angle; //角度
      var p = json.prize; //奖项
      $("#startbtn").rotate({
        duration:3000, //转动时间
        angle: 0,
        animateTo:1800+a, //转动角度         easing: $.easing.easeOutSine,
        callback: function(){
          var con = confirm('恭喜你,中得'+p+'\n还要再来一次吗?');
          if(con){
            lottery();
          }else{
            return false;
          }
        }
      });
    }
  });
}

我们构建自定义函数lottery(),在lottery()我们向data.php发送一个POST请求,如果成功返回中奖信息后,调用rotate插件开始转动,转动角度由后台返回的角度决定,这里我们用1800+a表示转动的角度,即指针转动6圈+a度后停止,然后我们在单击“开始抽奖”按钮时调用lottery(),于是转盘抽奖就完成。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 #Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 #Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 #Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 #Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 #Javascript
详解Node.js模块间共享数据库连接的方法
May 24 #Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 #Javascript
You might like
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
python根据时间获取周数代码实例
2019/09/30 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python如何解除一个装饰器
2020/08/07 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
三维科技面试题
2013/07/27 面试题
RIP版本1跟版本2的区别
2013/12/30 面试题
我为自己代言广告词
2014/03/18 职场文书
高三家长寄语
2014/04/03 职场文书
继承公证书
2014/04/09 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
辩护词范文大全
2015/05/21 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python