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的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
Vue Promise的axios请求封装详解
Aug 13 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
深入array multisort排序原理的详解
2013/06/18 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
JointJS流程图的绘制方法
2018/12/03 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python中的全局变量用法分析
2015/06/09 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python中的面向接口编程示例详解
2021/01/17 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
幼儿发展评估方案
2014/06/11 职场文书
保护水资源的标语
2014/06/17 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
python如何为list实现find方法
2022/05/30 Python