微信抽奖转盘活动-效果源码分析

昨天接到公司的一个项目是在微信端做一个抽奖转盘的效果,脑海里的第一个想法就是用CSS3动画来实现这个效果,但是一想到抽奖概率与转盘动画的关联性,还是去网上找了一套代码。

写在这里做一下代码的知识总结吧!

所需要用到的插件:jquery、jQueryRotate(负责控制元素转动的角度)、jquery.easing(负责元素转动时的动画效果调用)

微信抽奖转盘活动-效果源码分析
<!--移动端的meta标签定义,在这里就不叙述了,有兴趣的可以问度娘了解下-->
<meta name=‘viewport‘ content=‘width=device-width, initial-scale=1.0, maximum-scale=1.0‘/> 
<meta name=”format-detection” content=”telephone=no” />
<meta http-equiv="X-UA-Compatible" content="IE=8">

<!--JS引入-->
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>

<!--简单的html源码-->
<div class="demo">
        <img id="disk" src="disk.jpg" />
        <img src="start.png" id="startbtn" class="start">
</div>
微信抽奖转盘活动-效果源码分析

 

 

 以上的基本需求满足后开始研究效果的实现

微信抽奖转盘活动-效果源码分析
<script type="text/javascript">
$(function(){ 
     $("#startbtn").click(function(){ 
        lottery();                         //给转盘的按钮绑定一个事件
    }); 
}); 
function lottery(){ 
    $.ajax({                               //执行事件首先请求php(代码下面会贴出)
        type: ‘POST‘, 
        url: ‘json.php‘,                   //请求PHP地址
        dataType: ‘json‘,                  //数据类型为json
        cache: false,                      //缓存:false
        error: function(){                 //请求失败执行函数
            alert(‘出错了!‘); 
            return false; 
        }, 
        success:function(json){                                          // 带入PHP返回的参数数组
            $("#startbtn").unbind(‘click‘).css("cursor","default");      // 首先移除按钮可再次执行函数Click事件,至于CSS对于移动端没用,只是PC端一个UI效果罢了
            var a = json.angle;                                          // 定义角度 a = php数组.angle
            var p = json.prize;                                          // 定义奖项文字 p = php数组.prize
            $("#startbtn").rotate({                                      // 执行jQueryRotate.js插件中的rotate方法
                duration:3000,                                           // 转动时间 
                angle: 0,                                                // 起始角度
                animateTo:1800+a,                                        // 转动角度+a(为保证随机数a过小,转动立刻停止,将1800为基本转动角度) 
                easing: $.easing.easeOutSine,                            // 执行jQuery.easing.min.js中定义的动画效果
                callback: function(){                                    // 最后alert返回给用户信息
                    var con = confirm(‘恭喜你,中得‘+p+‘\n还要再来一次吗?‘); 
                    if(con){ 
                        lottery(); 
                    }else{ 
                        return false; 
                    } 
                } 
            });
        } 
    }); 

} 
</script>
微信抽奖转盘活动-效果源码分析

 

 接下来是PHP代码,笔者不懂PHP,只能把自己知道的理念备注下来,方便修改。

微信抽奖转盘活动-效果源码分析
<?php 

$prize_arr = array(                                                                //建立一个二维数组
    ‘0‘ => array(‘id‘=>1,‘min‘=>1,‘max‘=>60,‘prize‘=>‘一等奖‘,‘v‘=>1),              //根据数组的下标找到其中数组的信息
    ‘1‘ => array(‘id‘=>2,‘min‘=>61,‘max‘=>120,‘prize‘=>‘二等奖‘,‘v‘=>2),            //min代表最小角度 max代表最大角度 转盘是以时钟六点方向为0度进行计算
    ‘2‘ => array(‘id‘=>3,‘min‘=>121,‘max‘=>180,‘prize‘=>‘三等奖‘,‘v‘=>5),           //prize也就是js请求回来的变量 p
    ‘3‘ => array(‘id‘=>4,‘min‘=>181,‘max‘=>240,‘prize‘=>‘四等奖‘,‘v‘=>7),
    ‘4‘ => array(‘id‘=>5,‘min‘=>241,‘max‘=>300,‘prize‘=>‘五等奖‘,‘v‘=>10), 
    ‘5‘ => array(‘id‘=>6,‘min‘=>301,‘max‘=>360,‘prize‘=>‘六等奖‘,‘v‘=>25), 
); 
foreach ($prize_arr as $key => $val) { 
    $arr[$val[‘id‘]] = $val[‘v‘]; 
} 
 
$rid = getRand($arr);                                                           //根据概率获取奖项id s
$res = $prize_arr[$rid-1];                                                      //中奖项 
$min = $res[‘min‘]; 
$max = $res[‘max‘]; 
$result[‘angle‘] = mt_rand($min,$max);                                          //随机从min与max之间 生成一个数值

$result[‘prize‘] = $res[‘prize‘]; 

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;                                              //返回计算后的 result[‘angle‘]数组中的值给JS计算
}  
echo json_encode($result); 
?>
微信抽奖转盘活动-效果源码分析

 

 由于也是用的别人的代码,但是自己总结一下修改经验的话,我认为还是一个好的习惯,如果什么时候笔者也能自己写出来的话,那我会很高兴的。

微信抽奖转盘活动-效果源码分析,布布扣,bubuko.com

微信抽奖转盘活动-效果源码分析

上一篇:Windows10计算文件SHA1 SHA256 SHA384 SHA512 or MD5


下一篇:【电脑】电脑windows10添加开机启动项