jQuery幸运大转盘_jQuery+PHP抽奖程序
http://www.thinkphp.cn/code/1153.html
网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序。
若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。
- 首先要准备两张图片,即圆盘和指针,然后我们在#disk来放置圆盘背景图片,在css中控制,用#start来放置指针图片start.png。
- <div id="disk"></div>
- <div id="start"><img src="data:images/start.png" id="startbtn" alt="转盘开启"/></div>
- 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动画插件。
- <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>
- 最后通过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();
- }
- }
- });
- }
- });
- }
查看该特效演示及免费下载,请访问http://www.sucaihuo.com/js/19.html
jQuery幸运大转盘_jQuery+PHP抽奖程序的更多相关文章
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
- PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...
- asp.net+jQueryRotate开发幸运大转盘
在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...
- PHP幸运大转盘源码,支持ThinkPHP
原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- Vue 幸运大转盘
转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...
- 跟我一起学编程—《Scratch编程》第24课:幸运大转盘
同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...
随机推荐
- fedora下安装xdot和objgraph
前提:安装好了python 1.先下载xdot-0.6.tar.gz和objgraph-1.8.0-py27-none-any.whl,你也可以在官网上下载其他版本. 2.下载完后,解压. 3.打开终 ...
- 读取本地json文件,转出为指定格式json 使用Base64进行string的加密和解密
读取本地json文件,转出为指定格式json 引用添加Json.Net 引用命名空间 using Newtonsoft.Json //读取自定目录下的json文件StreamReader sr = ...
- 一个IM开源项目LiteTalk
http://blog.csdn.net/visualwind/article/details/6086631 http://blog.sina.com.cn/s/blog_54b5ea250101n ...
- 十分简洁的手机浏览器 lydiabox
没有地址栏,没有工具栏.web app无需下载.无需安装.无需更新,加入即用:再也不用记住网址.更不用输入网址--一款这样极简极方便的浏览器,你想要吗? 我们做了一个十分简洁的手机浏览器,这个浏览器也 ...
- OC基础:Date
NSDate 日期类,继承自NSObject,代表一个时间点 NSDate *date=[NSDate date]; NSLog(@"%@",date); //格林尼治时间, ...
- oracle连接串的一种写法
我在.NET项目里访问oracle,向来是规规矩矩地这样写: DATA SOURCE=PDBGZFBC;PASSWORD=test;PERSIST SECURITY INFO=True;USER ID ...
- 屏蔽微软的SignalR
去年采用ASP.NET MVC开发项目,在谷歌浏览器里调试页面的时候,发现项目在不停地请求数据,链接很奇怪: http://localhost:63004/654c2dd725bb4401b8fc0c ...
- IDEA 使用方法快捷键
Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...
- BZOJ1266:上学路线route (最短路+最小割)
可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信息学奥林匹克竞赛小组才发现每天上学的乘车路线不一定是最优的. 可可:“很可能我们在上学的路途 ...
- Mediaproxy 与 Rtpproxy
Mediaproxy: Mediaproxy是Opensips的一个模块,它用来实现现有大多数sip客户端的自动NAT穿透.这就意味着,当使用mediaproxy模块时,不需要对NAT盒子进行任何配置 ...