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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
BootStrap表单控件之文本域textarea
May 23 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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安装攻略:常见问题解答(三)
2006/10/09 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
python多进程实现进程间通信实例
2017/11/24 Python
Python制作exe文件简单流程
2019/01/24 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
python进程和线程用法知识点总结
2019/05/28 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
学习党章思想汇报
2014/01/07 职场文书
小学数学教学反思
2014/02/02 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
Android Rxjava3 使用场景详解
2022/04/07 Java/Android