原理

先看图

可以看到1-6等奖都只有1个 ，7等奖有6个。指针默认指向上图位置，记为0°。

每个奖项对应不同的角度，圆的角度为360°，分成12块，所以每块为30°。

为了防止指针指着相邻两个将向之间的线，所以记为一等奖的最小角度为1°，最大角度为29°。同理可找出其他奖项的角度，这要注意，七等奖有6个。

然后呢，每个奖项都有不同的中奖概率，我们根据概率来获取奖项（概率可以设置为0，你懂的～），获取奖品后，在根据最大和最小角度生成一个随机数，来让指针旋转即可..

HTML代码

代码是基于thinkphp的，如果你的不是，修改里面的url路径就行了

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="keywords" content="幸运大转盘，cnsecer.com" />
  6. <meta name="description" content="幸运大转盘" />
  7. <title>幸运大转盘</title>
  8. <style type="text/css">
  9. .demo{width:417px; height:417px; position:relative; margin:50px auto}
  10. #disk{width:417px; height:417px; background:url(__STATIC__/images/disk.jpg) no-repeat}
  11. #start{width:163px; height:320px; position:absolute; top:46px; left:130px;}
  12. #start img{cursor:pointer}
  13. </style>
  14. <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  15. <script type="text/javascript" src="__STATIC__/js/jQueryRotate.2.2.js"></script>
  16. <script type="text/javascript" src="__STATIC__/js/jquery.easing.min.js"></script>
  17. <script type="text/javascript">
  18. $(function(){
  19. $("#startbtn").click(function(){
  20. lottery();
  21. });
  22. });
  23. function lottery(){
  24. $.ajax({
  25. type: 'POST',
  26. url: '{:U(\'game/run\')}', //提交地址 改为你自己的
  27. dataType: 'json',
  28. cache: false,
  29. error: function(){
  30. alert('出错了！');
  31. return false;
  32. },
  33. success:function(json){
  34. $("#startbtn").unbind('click').css("cursor","default");
  35. var a = json.angle; //角度
  36. var p = json.prize; //奖项
  37. $("#startbtn").rotate({
  38. duration:3000, //转动时间
  39. angle: 0,
  40. animateTo:1800+a, //转动角度
  41. easing: $.easing.easeOutSine,
  42. callback: function(){
  43. var con = confirm('恭喜你，中得'+p+'\n还要再来一次吗？');
  44. if(con){
  45. lottery();
  46. }else{
  47. return false;
  48. }
  49. }
  50. });
  51. }
  52. });
  53. }
  54. </script>
  55. </head>
  56. <body>
  57. <div id="main">
  58. <div class="msg"></div>
  59. <div class="demo">
  60. <div id="disk"></div>
  61. <div id="start"><img src="__STATIC__/images/start.png" id="startbtn"></div>
  62. </div>
  63. </div>
  64. <div id="footer">
  65. </div>
  66. </body>
  67. </html>

后台处理代码

  1. <?php
  2. namespace Home\Controller;
  3. use Think\Controller;
  4. class GameController extends BaseController{
  5. public function index(){
  6. $this->display("index");
  7. }
  8. public function run(){
  9. $proArr = array();
  10. //v 是中奖概率 相加之后最好为100的整数倍 id为奖品编号 min max 分别为最大和最小角度
  11. $prize_arr = array(
  12. '0' => array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等奖','v'=>0),
  13. '1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等奖','v'=>0),
  14. '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等奖','v'=>0),
  15. '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等奖','v'=>0),
  16. '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等奖','v'=>0),
  17. '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等奖','v'=>0),
  18. '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332), 'max'=>array(58,118,178,238,298,358),'prize'=>'七等奖','v'=>100)
  19. );
  20. //获取随机奖品
  21. foreach ($prize_arr as $v) {
  22. $proArr[$v['id']] = $v['v'];
  23. }
  24. $rid = $this->getRand($proArr); //根据概率获取奖项id
  25. $res = $prize_arr[$rid-1]; //中奖项
  26. // dd($res);die;
  27. $min = $res['min'];
  28. $max = $res['max'];
  29. if($res['id']==7){ //七等奖
  30. $i = mt_rand(0,5);
  31. $result['angle'] = mt_rand($min[$i],$max[$i]);
  32. }else{
  33. $result['angle'] = mt_rand($min,$max); //随机生成一个角度
  34. }
  35. $result['prize'] = $res['prize'];
  36. echo json_encode($result);
  37. }
  38. protected function getRand($proArr) {
  39. $result = '';
  40. //概率数组的总概率精度
  41. $proSum = array_sum($proArr);
  42. //概率数组循环
  43. foreach ($proArr as $key => $proCur) {
  44. $randNum = mt_rand(1, $proSum);
  45. if ($randNum <= $proCur) {
  46. $result = $key;
  47. break;
  48. } else {
  49. $proSum -= $proCur;
  50. }
  51. }
  52. unset ($proArr);
  53. return $result;
  54. }
  55. }

PHP幸运大转盘源码，支持ThinkPHP的更多相关文章

  1. WP8.1&Win10幸运大转盘源码分享

    先AD一下我的群:Win10开发者群:53078485 最近在写一个APP,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以 ...

  2. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  3. 修改Cosbench源码 支持s3的 http range request 测试场景

    在视频点播的业务应用场景中,用户使用了ffmpeg工具做视频实时转码用. 而ffmpeg使用range 请求.而Cosbench不支持这种测试场景,所以需要修改源码支持这种测试场景. HTTP 协议介 ...

  4. asp.net+jQueryRotate开发幸运大转盘

    在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...

  5. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  6. PHP+AJAX开发幸运大转盘抽奖

    PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...

  7. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  8. Vue 幸运大转盘

    转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...

  9. 修改json源码支持datetime序列化

    修改json源码支持datetime序列化 import json import datetime now = datetime.datetime.today() json.dumps(now) 抛出 ...

随机推荐

  1. vue源码核心部分

    1.模板编译   初始化时做的:template ==parse()==>ASTtree ==generate()==>render函数  ==> mount(调用dom方法) 每次 ...

  2. ECMAScript 6 学习总结

    1.什么是ES6? 简单的说 ES6 的第一个版本,在2015年6月发布了,正式名称就是<ECMAScript 2015标准>(简称 ES2015)在2016年6月,小幅修订的<EC ...

  3. 未预期的符号 `$'{\r'' 附近有语法错误

    ../runcmake: 行 2: $'\r': 未找到命令 ../runcmake: 行 3: 未预期的符号 `$'{\r'' 附近有语法错误 考虑到代码是从windows下一直过来的,脚本可能在格 ...

  4. ORACLE中用户等系统信息操作

    1.查看所有用户:select * from dba_users;   select * from all_users;   select * from user_users; 2.查看用户或角色系统 ...

  5. 说下spring生命周期

    面试官:说下spring生命周期 程序员:不会 那你先回去等消息吧     Bean实现了BeanNameAware,Spring会将Bean的ID透传给setBeanName java.后端开发.程 ...

  6. HBuilder ，及自用主题

    字体:Consolas http://bbs.csdn.net/topics/390858585  让代码更美:你最爱的编程字体 http://www.dcloud.io HBuilder下载 htt ...

  7. 03 字符串常用操作方法及For 循环

    字符串常用操作 s = 'alexWUsir' s1 = s.capitalize() #首字母大写 print(s1) #Alexwusir s2 = s.upper() #全部大写 print(s ...

  8. TensorFlow学习之二

    二.常用操作符和基本数学函数 大多数运算符都进行了重载操作,使我们可以快速使用 (+ - * /) 等,但是有一点不好的是使用重载操作符后就不能为每个操作命名了. 1  算术操作符:+ - * / % ...

  9. 通过jquery 获取用户当前所在的城市名称和IP地址

    下面这段JS代码是通过jquery 结合新浪IP地址库和QQip地址库接口获取用户当前所在的城市(省份)名称. 用户当前IP地址等数据.其中当前IP是通过 QQip地址库接口获取,其他数据都是通过 新 ...

  10. 从一个简单的约束看规范性的SQL脚本对数据库运维的影响

    之前提到了约束的一些特点,看起来也没什么大不了的问题,http://www.cnblogs.com/wy123/p/7350265.html以下以实际生产运维中遇到的一个问题来说明规范的重要性. 如下 ...