php开发幸运大转盘,jQuery幸运大转盘_jQuery+PHP抽奖程序
首先要准备两张图片,即圆盘和指针,然后我们在#disk来放置圆盘背景图片,在css中控制,用#start来放置指针图片start.png。
CSS指针和圆盘样式如下:
#disk{width:417px; height:417px; background:url(images/disk.jpg) no-repeat}
#start{width:163px; height:320px; position:absolute; top:46px; left:130px;}
#start img{cursor:pointer}
接着我们引入jquery.js、旋转插件jQueryRotate.2.2.js及动画easing插件jquery.easing.min.js。easing 教程我们已经讲过了,jQuery Easing动画插件。
最后通过jQueryRotate.js旋转插件,我们让指针转起来。
$(function() {
$("#startbtn").rotate({
bind: {
click: function() {
var random = Math.floor(Math.random() * 360); //生成随机数
$(this).rotate({
duration: 3000,
//转动时间间隔(速度单位ms)
angle: 0,
//指针开始角度
animateTo: 3600 + random,
//转动角度,当转动角度到达3600+random度时停止转动。
easing: $.easing.easeOutSine,
//easing动画效果
callback: function() { //回调函数
alert('恭喜您,中奖了!');
}
});
}
}
});
});
下面介绍使用PHP来控制抽奖几率,以及完成两者之间的交互:
首先,在ajax.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)
//min数组表示每个个奖项对应的最小角度 max表示最大角度
//prize表示奖项内容,v表示中奖几率(若数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推)
);
中奖概率方法我们之前在jQuery砸金蛋_PHP砸金蛋讲过,代码如下
function getRand($proArr) {
$data = '';
$proSum = array_sum($proArr); //概率数组的总概率精度
foreach ($proArr as $k => $v) { //概率数组循环
$randNum = mt_rand(1, $proSum);
if ($randNum <= $v) {
$data = $k;
break;
} else {
$proSum -= $v;
}
}
unset($proArr);
return $data;
}
函数getRand()会根据数组中设置的几率计算出符合条件的id,我们可以接着调用getRand()。
foreach ($prize_arr as $v) {
$arr[$v['id']] = $v['v'];
}
$prize_id = getRand($arr); //根据概率获取奖项id
$res = $prize_arr[$prize_id - 1]; //中奖项
$min = $res['min'];
$max = $res['max'];
if ($res['id'] == 7) { //七等奖
$i = mt_rand(0, 5);
$data['angle'] = mt_rand($min[$i], $max[$i]);
} else {
$data['angle'] = mt_rand($min, $max); //随机生成一个角度
}
$data['prize'] = $res['prize'];
echo json_encode($data);
接着点击”开始抽奖“按钮,便会向后台ajax.php请求并返回奖项信息,这时指针开始转动,指针最终停留位置是由ajax.php返回值angle 来决定的,这样我们就可以控制概率和前端指针转动停留位置。代码如下:
$(function() {
$("#startbtn").click(function() {
lottery();
});
});
function lottery() {
$.ajax({
type: 'POST',
url: 'ajax.php',
dataType: 'json',
cache: false,
error: function() {
alert('Sorry,出错了!');
return false;
},
success: function(json) {
$("#startbtn").unbind('click').css("cursor", "default");
var angle = json.angle; //指针角度
var prize = json.prize; //中奖奖项标题
$("#startbtn").rotate({
duration: 3000,//转动时间 ms
angle: 0, //从0度开始
animateTo: 3600 + angle,//转动角度
easing: $.easing.easeOutSine, //easing扩展动画效果
callback: function() {
var resulte = confirm('恭喜您中得' + prize + '\n想要继续吗?');
if (resulte) { //若是点击确定,继续抽奖
lottery();
}
}
});
}
});
}
php开发幸运大转盘,jQuery幸运大转盘_jQuery+PHP抽奖程序相关推荐
- php大转盘程序,jQuery幸运大转盘_jQuery+PHP抽奖程序(下)
上一篇讲解了幸运大转盘前端,而本文继续讲下半部分:PHP控制抽奖几率并最终实现转盘抽奖. 下载资源 下载积分: 95 积分 PHP 首先,在ajax.php中创建一个奖项对应角度和中奖几率二维数组: ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序
http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...
- 幸运大转盘php逻辑判断,jQuery幸运大转盘_jQuery+PHP抽奖程序(上)
网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,我们分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转动效果.第二部分侧重使用P ...
- qq开放平台之站内应用-php抽奖大转盘,jQuery实现大转盘抽奖活动仿QQ音乐代码分享...
jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码. 运行效果图:--------------------------- ...
- jQuery幸运大转盘
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- html转盘游戏代码,html5 转盘 例子 附完整源码 有截图 亲测通过
[实例简介]html5 转盘实例 可直接拿来做 抽奖程序 [实例截图] [核心代码] var colors = ["#B8D430", "#3AB745", ...
- js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码 实现功能截图 系统功能 使用技术 代码 写在最后 js框架jquery实现的幸运大转盘抽奖程序代码 本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
- js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器 源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
- php幸运大抽奖,幸运大转盘-jQuery+PHP实现的抽奖程序-完善中
小雨在线网站自营销研究之幸运大转盘-jQuery+PHP实现的抽奖程序-完善中 1.[代码][PHP]代码 小雨在线网站自营销研究 $(function () { $("#startbtn& ...
- PHP做大转盘抽奖的思路,jQuery实现幸运大转盘(php抽奖程序)抽奖程序
抽奖程序有各式各样的形式,其中幸运大转盘最为常见.线上线下都有很多的使用场景. 本文结合我自己的php网站,是实现一个php抽奖程序. 下图是该抽奖程序的截图: 一般的抽奖程序主要是算法程序,界面效果 ...
最新文章
- matlab dir datenum,matlab中的datenum
- 深入浅出grep与正则表达式
- IBatis 简易框架搭建
- mongo创建用户和创建数据库
- 不要错过使用jOOλ或jOOQ编写Java 8 SQL单行代码的机会
- viewController详解
- 跟左神学算法2 排序相关
- directshow-faac编码
- 【CV】如何使用Tensorflow提供的Object Detection API --1--使用预训练模型
- 详解Java 堆排序
- 专业的WiFi检测工具有哪些?如何解决wifi信号不好?
- 港交所、中芯国际、京东、诺基亚等公司高管变动
- 学生上课睡觉班主任怎么处理_[转载]学生上课睡觉,老师该怎么处理?
- 从零开始,做一个NodeJS博客(零):整体规(chui)划(niu)
- Greedy Algorithm
- PDA库存盘点,有效提高电子制造企业库存盘点效率
- 2 CRYPTO Bubble_Babble气泡密码
- 基于RuoYi框架快速搭建自己的后台管理系统
- python实现labelme样本自动标注
- Msgbox信息提示框
热门文章
- bh1750采集流程图_基于BH1750的光照度检测)教程.doc
- Python中的函数(二)--提高篇
- 可以嵌入ppt的课堂点名器_学点云课堂:小班课应用场景,饱受青睐的秘诀
- 汽水分离再热器的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- Android设置应用图标
- 西门子组态软件wincc短信报警,微信推送
- selenium爬取新浪滚动新闻
- linux x99 测试,超频测试总结 - 技嘉X99 Phoenix SLI主板评测:综合素质爆表的主板 - 超能网...
- PWmat案例赏析:计算精度高、速度快的第一性原理计算,研究表面终端结构对NV色心影响
- STM32时钟--基于正点原子STM32视频教程