Maison >php教程 >php手册 >jQuery幸运大转盘_jQuery+PHP抽奖程序

jQuery幸运大转盘_jQuery+PHP抽奖程序

WBOY
WBOYoriginal
2016-06-07 11:39:131269parcourir

网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序。
jQuery幸运大转盘_jQuery+PHP抽奖程序

若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。首先要准备两张图片,即圆盘和指针,然后我们在#disk来放置圆盘背景图片,在css中控制,用#start来放置指针图片start.png。<br> <div></div> <br> <div><img alt="jQuery幸运大转盘_jQuery+PHP抽奖程序" ></div> <br> CSS指针和圆盘样式如下:<br> #disk{width:417px; height:417px; background:url(images/disk.jpg) no-repeat}  <br> #start{width:163px; height:320px; position:absolute; top:46px; left:130px;}  <br> #start img{cursor:pointer}<br> 接着我们引入jquery.js、旋转插件jQueryRotate.2.2.js及动画easing插件jquery.easing.min.js。easing 教程我们已经讲过了,jQuery Easing动画插件。<br> <script> </script> <br> <script></script> <br> <script></script><br> 最后通过jQueryRotate.js旋转插件,我们让指针转起来。<br> $(function() { <br>     $("#startbtn").rotate({ <br>         bind: { <br>             click: function() { <br>                 var random = Math.floor(Math.random() * 360); //生成随机数  <br>                 $(this).rotate({ <br>                     duration: 3000, <br>                     //转动时间间隔(速度单位ms)  <br>                     angle: 0, <br>                     //指针开始角度  <br>                     animateTo: 3600 + random, <br>                     //转动角度,当转动角度到达3600+random度时停止转动。 <br>                     easing: $.easing.easeOutSine, <br>                     //easing动画效果 <br>                     callback: function() { //回调函数  <br>                         alert('恭喜您,中奖了!'); <br>                     } <br>                 }); <br>             } <br>         } <br>     }); <br> });<br> <br> 下面介绍使用PHP来控制抽奖几率,以及完成两者之间的交互:<br> <br> 首先,在ajax.php中创建一个奖项对应角度和中奖几率二维数组:<br> $prize_arr = array( <br>     '0' => array('id' => 1, 'min' => 1, 'max' => 29, 'prize' => '一等奖', 'v' => 1), <br>     '1' => array('id' => 2, 'min' => 302, 'max' => 328, 'prize' => '二等奖', 'v' => 2), <br>     '2' => array('id' => 3, 'min' => 242, 'max' => 268, 'prize' => '三等奖', 'v' => 5), <br>     '3' => array('id' => 4, 'min' => 182, 'max' => 208, 'prize' => '四等奖', 'v' => 7), <br>     '4' => array('id' => 5, 'min' => 122, 'max' => 148, 'prize' => '五等奖', 'v' => 10), <br>     '5' => array('id' => 6, 'min' => 62, 'max' => 88, 'prize' => '六等奖', 'v' => 25), <br>     '6' => array('id' => 7, 'min' => array(32, 92, 152, 212, 272, 332), <br>         'max' => array(58, 118, 178, 238, 298, 358), 'prize' => '七等奖', 'v' => 50) <br>     //min数组表示每个个奖项对应的最小角度 max表示最大角度 <br>     //prize表示奖项内容,v表示中奖几率(若数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推) <br>  );<br> 中奖概率方法我们之前在jQuery砸金蛋_PHP砸金蛋讲过,代码如下<br> function getRand($proArr) { <br>     $data = ''; <br>     $proSum = array_sum($proArr); //概率数组的总概率精度  <br>  <br>     foreach ($proArr as $k => $v) { //概率数组循环 <br>         $randNum = mt_rand(1, $proSum); <br>         if ($randNum              $data = $k; <br>             break; <br>         } else { <br>             $proSum -= $v; <br>         } <br>     } <br>     unset($proArr); <br>  <br>     return $data; <br> }<br> 函数getRand()会根据数组中设置的几率计算出符合条件的id,我们可以接着调用getRand()。<br> foreach ($prize_arr as $v) { <br>     $arr[$v['id']] = $v['v']; <br> } <br>  <br> $prize_id = getRand($arr); //根据概率获取奖项id  <br>  <br> $res = $prize_arr[$prize_id - 1]; //中奖项  <br> $min = $res['min']; <br> $max = $res['max']; <br> if ($res['id'] == 7) { //七等奖  <br>     $i = mt_rand(0, 5); <br>     $data['angle'] = mt_rand($min[$i], $max[$i]); <br> } else { <br>     $data['angle'] = mt_rand($min, $max); //随机生成一个角度  <br> } <br> $data['prize'] = $res['prize']; <br>  <br> echo json_encode($data);<br> <br> 接着点击”开始抽奖“按钮,便会向后台ajax.php请求并返回奖项信息,这时指针开始转动,指针最终停留位置是由ajax.php返回值angle 来决定的,这样我们就可以控制概率和前端指针转动停留位置。代码如下:<br> $(function() { <br>     $("#startbtn").click(function() { <br>         lottery(); <br>     }); <br> }); <br> function lottery() { <br>     $.ajax({ <br>         type: 'POST', <br>         url: 'ajax.php', <br>         dataType: 'json', <br>         cache: false, <br>         error: function() { <br>             alert('Sorry,出错了!'); <br>             return false; <br>         }, <br>         success: function(json) { <br>             $("#startbtn").unbind('click').css("cursor", "default"); <br>             var angle = json.angle; //指针角度  <br>             var prize = json.prize; //中奖奖项标题  <br>             $("#startbtn").rotate({ <br>                 duration: 3000,//转动时间 ms <br>                 angle: 0, //从0度开始 <br>                 animateTo: 3600 + angle,//转动角度  <br>                 easing: $.easing.easeOutSine, //easing扩展动画效果 <br>                 callback: function() { <br>                     var resulte = confirm('恭喜您中得' + prize + '\n想要继续吗?'); <br>                     if (resulte) { //若是点击确定,继续抽奖 <br>                         lottery(); <br>                     } <br>                 } <br>             }); <br>         } <br>     }); <br> }查看该特效演示及免费下载,请访问http://www.sucaihuo.com/js/19.html

AD:真正免费,域名+虚机+企业邮箱=0元

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:csv 文件操作Article suivant:U函数,多入口跳转方法