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 相关文章推荐
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
jquery图形密码实现方法
Mar 11 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
jQuery限制图片大小的方法
May 25 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
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二维/三维数组转字符串
2013/09/13 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python制作简易注册登录系统
2016/12/15 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
产假请假条
2014/04/10 职场文书
红色故事演讲稿
2014/05/22 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android