一个好玩的jq+php实现转盘抽奖程序
前台页面：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html5,本地存储" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>幸运大转盘-jQuery+PHP实现的抽奖程序</title>
<style type="text/css">
*{ margin:0; padding:0;}
img { border:none;}
.w1000{ width:1000px; margin:0 auto;}
.w1000 img, .gl img{ display:block;}
/*中奖名单*/
button{padding:2px 8px;}
.action{text-align:center; padding:10px; border-bottom:dashed 1px #ccc;}
#rightDemo{width:257px; padding:10px;position:absolute; left:95px; top:90px;}
#rightDemo li{ color:#825a00; font-size:13px;width:257px;}
ul{ height:335px; overflow:hidden;}
ul li{line-height:30px; height:30px; overflow:hidden; list-style:none; padding:0; margin:0;}
/*页面样式*/
.box_11{ background:url(http://www.sansejin.com.cn/themes/laboci_2012/images/sales201308/box_r11_bg.jpg) no-repeat center center;}
.gl{ background:#F00F4B;}
/*转盘样式*/
#main{width:1000px; min-height:600px; margin:0 auto;}
.demo{width:1000px; height:527px; position:relative; margin:0 auto; zoom:1;}
#disk{width:1000px; height:527px; background:url(http://www.sansejin.com.cn/themes/laboci_2012/images/sales201308/disk.jpg) no-repeat}
#start{width:111px; height:212px; position:absolute; top:149px; left:605px;}
#start img{cursor:pointer}
/*转盘样式*/ </style>
<script type="text/javascript" src="http://www.helloweba.com/demo/js/jquery.js"></script>
<script type="text/javascript" src="http://www.helloweba.com/demo/lottery/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="http://www.helloweba.com/demo/lottery/jquery.easing.min.js"></script>
<script type="text/javascript">
$(function(){
$("#startbtn").click(function(){
lottery();
});
});
function lottery(){
$.ajax({
type: 'POST',
url: 'data.php',
dataType: 'json',
cache: false,
error: function(){
alert('出错了！');
return false;
},
success:function(json){
$("#startbtn").unbind('click').css("cursor","default");
var a = json.angle;
var p = json.prize;
$("#startbtn").rotate({
duration:3000, //转动时间
angle: 0, //默认角度
animateTo:1800+a, //转动角度
easing: $.easing.easeOutSine,
callback: function(){
alert('恭喜你，抽中'+'"'+p+'"!');
$("#startbtn").rotate({angle:0}); $("#startbtn").click(function(){ lottery(); }).css("cursor","pointer"); }
});
}
});
}
</script>
</head> <body> <div class="gl">
<!--抽奖区域[-->
<div class="gl">
<div class="box_11">
<!--抽奖转盘[-->
<div class="demo">
<div id="disk"></div>
<div id="start"><img src="http://www.sansejin.com.cn/themes/laboci_2012/images/sales201308/start.png" alt="抽奖" id="startbtn"/></div>
<!--中奖名单[-->
<div id="rightDemo">
<ul id="rightBox">
<li>手机尾号为***7884的用户抽中100元现金券大礼包</li>
<li>手机尾号为***7884的用户抽中100元现金券大礼包</li>
<li>手机尾号为***0573的用户抽中大奖iphone5智能手机</li>
<li>手机尾号为***3200的用户抽中300元现金券大礼包</li>
<li>手机尾号为***4520的用户抽中300元现金券大礼包</li>
<li>手机尾号为***2341的用户抽中300元现金券大礼包</li>
<li>手机尾号为***9687的用户抽中3折抢购齿白健精品套装</li>
<li>手机尾号为***0931的用户抽中300元现金券大礼包</li>
<li>手机尾号为***1747的用户抽中3折抢购红酒木瓜丰胸靓汤</li>
<li>手机尾号为***3748的用户抽中100元现金券大礼包</li>
<li>手机尾号为***0125的用户抽中300元现金券大礼包</li>
<li>手机尾号为***0063的用户抽中3折抢购魔泥金装精品套装</li>
<li>手机尾号为***7884的用户抽中300元现金券大礼包</li>
<li>手机尾号为***5892的用户抽中100元现金券</li>
<li>手机尾号为***7884的用户抽中300元现金券大礼包</li>
<li>手机尾号为***7224的用户抽中3折抢购祛疤精华凝露组合二代</li>
<li>手机尾号为***7910的用户抽中300元现金券大礼包</li>
<li>手机尾号为***2832的用户抽中300元现金券大礼包</li>
<li>手机尾号为***3488的用户抽中3折抢购红酒木瓜丰胸靓汤</li>
<li>手机尾号为***6693的用户抽中300元现金券大礼包</li>
<li>手机尾号为***4787的用户抽中3折抢购齿白健精品套装</li>
<li>手机尾号为***8547的用户抽中3折抢购祛疤精华凝露组合二代</li>
<li>手机尾号为***7884的用户抽中300元现金券大礼包</li>
<li>手机尾号为***2670的用户抽中100元现金券</li>
<li>手机尾号为***0811的用户抽中300元现金券大礼包</li>
<li>手机尾号为***5120的用户抽中3折抢购魔泥金装精品套装</li>
<li>手机尾号为***9229的用户抽中300元现金券大礼包</li>
<li>手机尾号为***4321的用户抽中大奖ipad mini平板电脑</li>
<li>手机尾号为***6693的用户抽中300元现金券大礼包</li>
<li>手机尾号为***8777的用户抽中100元现金券</li>
<li>手机尾号为***9968的用户抽中300元现金券大礼包</li>
<li>手机尾号为***4699的用户抽中3折抢购祛疤精华凝露组合二代</li>
<li>手机尾号为***8511的用户抽中300元现金券大礼包</li>
<li>手机尾号为***6665的用户抽中300元现金券大礼包</li>
<li>手机尾号为***5552的用户抽中3折抢购红酒木瓜丰胸靓汤</li>
<li>手机尾号为***4321的用户抽中300元现金券大礼包</li>
<li>手机尾号为***1399的用户抽中100元现金券大礼包</li>
<li>手机尾号为***8455的用户抽中3折抢购魔泥金装精品套装</li>
<li>手机尾号为***8822的用户抽中300元现金券大礼包</li>
<li>手机尾号为***8224的用户抽中3折抢购红酒木瓜丰胸靓汤</li>
<li>手机尾号为***5023的用户抽中300元现金券大礼包</li>
</ul>
</div>
<!--]end 中奖名单-->
</div>
<!--]end 抽奖转盘-->
</div>
</div> <script type="text/javascript">
function maquer(){
setInterval(function(){
$('#rightBox li:first').animate({'height':'0','opacity': '0'}, 'slow', function() {
$(this).removeAttr('style').insertAfter('#rightBox li:last');
});
},1000);
$(this).attr('disabled',true);
return;
}
maquer();
</script>
</body>
</html>
data.php
<?php
include("config.php");//链接数据库
$prize_arr = array(
'0' => array('id'=>1,'min'=>55,'max'=>80,'prize'=>'3折抢购红酒木瓜丰胸靓汤 ','v'=>10),//弧度：55°-80°范围是：“3折抢购红酒木瓜丰胸靓汤”奖， v=10是中奖率是10%
'1' => array('id'=>2,'min'=>10,'max'=>35,'prize'=>'3折抢购自由呼吸魔泥金装精品套装','v'=>10),
'2' => array('id'=>3,'min'=>320,'max'=>355,'prize'=>'100元现金券','v'=>20),
'3' => array('id'=>4,'min'=>230,'max'=>265,'prize'=>'3折抢购218齿白健套装','v'=>10),
'4' => array('id'=>5,'min'=>185,'max'=>215,'prize'=>'3折抢购498元祛疤精华','v'=>10),
'5' => array('id'=>6,'min'=>140,'max'=>170,'prize'=>'300元现金券大礼包','v'=>40)
);
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;
}
foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v'];
}
$rid = getRand($arr); //根据概率获取奖项id
$res = $prize_arr[$rid-1]; //中奖项
$min = $res['min'];
$max = $res['max'];
$result['angle'] = mt_rand($min,$max); //随机生成一个角度
$result['prize'] = $res['prize'];
echo json_encode($result);
?>
config.php（其实也可以不链接数据库，把data.php里面的链接数据库注释）
<?php
$q=mysql_connect("localhost","root","");
if(!$q){
die('亲，链接不到数据库哦！'.mysql_error());
}
mysql_query("set name utf8"); //以utf8读取数据库
mysql_select_db("test",$q); //数据库
?>
原文：
http://www.helloweba.com/view-blog-216.html
一个好玩的jq+php实现转盘抽奖程序的更多相关文章
- 用jQuery和PHP来实现转盘抽奖程序
准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...
- 幸运大转盘-jQuery+PHP实现的抽奖程序
目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序
http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...
- 简单JS旋转实现转盘抽奖效果
闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...
- 简单的转盘抽奖——CSS动画优化
前言 前两天去一家公司面试,被问到一些小游戏的东西.面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- javascript 转盘抽奖代码和计数器代码
要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下 看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究... 效果预览: 一.模拟抽奖的实 ...
- js转盘抽奖
这个是很简易的转盘,只用了html,css,js 通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度.再添加一个背景图片类似于奖项的转盘 <!DOCTY ...
- canvas转盘抽奖
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
随机推荐
- JavaScript键盘事件全面控制代码
JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...
- SQL如何查询两个表的数据
在进行查询操作时,我们通常需要查询两个关联表的数据,我们可以使用where语句进行查询,如: select Emp.E_Id,Company.C_OraName from Emp,Company wh ...
- C 语言链表操作例程 （待完善）
#include<stdio.h>#include<malloc.h>#include<conio.h>#include<stdlib.h>#inclu ...
- Gradient Descent 和 Stochastic Gradient Descent（随机梯度下降法）
Gradient Descent(Batch Gradient)也就是梯度下降法是一种常用的的寻找局域最小值的方法.其主要思想就是计算当前位置的梯度,取梯度反方向并结合合适步长使其向最小值移动.通过柯 ...
- 深入理解7816（4）---关于T=1
之前说过的T=0协议,基本上相当于是透明的数据,也就是说从应用的角度看,通过T=0传递的TPDU数据信息大都可以直接转换为对应的APD命令响应数据,“字节”是T=0协议最小的数据传输单元. 对于T=1 ...
- QT中窗口刷新事件的学习总结
一．主要理解一下几个方法和属性: 1．QWidget * QScrollView::viewport () const 2．void QWidget::paintEvent ( QPaintEvent ...
- VS2010 Command Prompt Error:Cannot determine the location of the VS Common Tools folder
就在VS2010 Command Prompt 用vcvarsall.bat x64重新设置环境变量的时候,出现了标题中的错误.原因就在参考链接中 References: http://stackov ...
- Android之ExpandableListView的属性（Group不展开）
1. 设置ExpandableListView 默认是展开的: 先实例化exListView 然后 exListView.setAdapter(exlvAdapter); //遍历所有group,将 ...
- 微软 Dynamics AX 学习步骤
第一步:了解到AX的架构,AOT结构,了解AOT中表,窗体,类,job,菜单,菜单项的基础开发.知道代码可以写在那里,每个对象以及对象内部的具体设置.如果你不了解类,继承,这些,那么就需要找一下讲述类 ...
- 一个跨域请求的XSS续
之前讨论过,在解决post跨域请求时,采用iframe+本域代理页的形式,兼容性(当然是包括IE6啦)是最好的.上次提到,代理页面的作用是:执行本域下的回调函数.就是这个原因,给XSS带来了便利.详细 ...