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学习笔记6 prototype的提出
Jan 11 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
Js切换功能的简单方法
Nov 23 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
Javascript闭包实例详解
Nov 29 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
webpack external模块的具体使用
Mar 10 Javascript
微信小程序自定义单项选择器样式
Jul 25 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
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python中求对数方法总结
2020/03/10 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
投标授权委托书范文
2014/08/02 职场文书
出国签证在职证明
2014/09/20 职场文书
办公室规章制度范本
2015/08/04 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
PL350与SW11的比较
2021/04/22 无线电