首页 php教程 php手册 php+jQuery实现网络转盘抽奖

php+jQuery实现网络转盘抽奖

Jun 06, 2016 pm 07:58 PM
公司 实现 抽奖 网络 转盘

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进 1.新建一个html页面,css样式,布局啥的,网上down的图片 !DOCTYPE HTMLhtmlheadmeta charset=utf-8meta name=keywords content=jquery/meta name=des

最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进


php+jQuery实现网络转盘抽奖

1.新建一个html页面,css样式,布局啥的,网上down的图片



		<meta charset="utf-8">
		<meta name="keywords" content="jquery">
		<meta name="description" content="抽奖大转盘">
		<title>PHP+JQUERY实现抽奖大转盘</title>
		<script type="text/javascript" src="../../../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
		<style type="text/css">
				.demo{width:417px;height:417px;position:relative;margin:50px auto}
				#disk{width:417px;height:417px;background:url(disk.jpg) no-repeat;}
				#start{width:163px;height:320px;position:absolute;top:46px;left:130px;}
				#start img{cursor:pointer}
		</style>
		<script type="text/javascript">
				$(function(){
						$("#startbtn").click(function(){
								lottery();
						});
				});
				function lottery(){
						$.ajax({
							type:&#39;POST&#39;,
							url:&#39;data.php&#39;,
							dataType:&#39;json&#39;,
							cache:false,
							error:function(){
								alert(&#39;出错啦!&#39;);
								return false;
							},
							success:function(json){ 
									$("#startbtn").unbind(&#39;click&#39;).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(){ 
											var con = confirm(&#39;恭喜你,中得&#39;+p+&#39;\n还要再来一次吗?&#39;); 
											if(con){ 
												lottery(); 
											}else{ 
												return false; 
											} 
										} 
									}); 
								} 
							}); 
				}
		</script>


		<div class="demo">
				<div id="disk"></div>
				<div id="start"><img  src="/static/imghw/default1.png" data-src="start.png" class="lazy" id="startbtn" alt="php+jQuery实现网络转盘抽奖" ></div>
		</div>

登录后复制

2.php程序处理页
<?php $prize_arr=array(
        &#39;0&#39;=>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)
);

//概率函数
function getRand($proArr) {
    $result = '';
     //概率数组的总概率精度
    $proSum = array_sum($proArr);
     //概率数组循环
    foreach ($proArr as $key => $proCur) {
        $randNum = mt_rand(1, $proSum);
        if ($randNum $val){
        $arr[$val['id']]=$val['v'];
}
$id=getRand($arr);//根据概率获取奖项id
$res=$prize_arr[$id-1];

$min=$res['min'];
$max=$res['max'];

if($res['id']==7){
        $i=mt_rand(0,5);
        $result['angle']=mt_rand($min[$i],$max[$i]);
}else{
        $result['angle']=mt_rand($min,$max);
}
$result['prize']=iconv('gb2312','UTF-8',$res['prize']);
echo json_encode($result);
exit;
?>
登录后复制


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

win10不能上网右下角显示地球怎么办 win10网络成地球无法上网的多种解决办法 win10不能上网右下角显示地球怎么办 win10网络成地球无法上网的多种解决办法 Feb 29, 2024 am 09:52 AM

这篇文章将介绍Win10系统网络显示地球标志但无法上网的解决方法。文章将提供详细的操作步骤,帮助读者解决Win10网络显示地球无法上网的问题。方法一:直接重启先检查一下网线是否没插好,宽带是否欠费,路由器或光猫可能会卡死,这时需重启路由器或光猫。假如当前电脑没有重要的事宜在操作,能直接重启电脑,大部分的小问题能通过重启电脑来快速解决。假如确定宽带没有欠费,网络正常,那便是另一回事。方法二:1、按【Win】键,或点击左下角的【开始菜单】,在打开的菜单项中,点击电源按钮上方的齿轮状图标,这个就是【设

华为手机如何实现双微信登录? 华为手机如何实现双微信登录? Mar 24, 2024 am 11:27 AM

华为手机如何实现双微信登录?随着社交媒体的兴起,微信已经成为人们日常生活中不可或缺的沟通工具之一。然而,许多人可能会遇到一个问题:在同一部手机上同时登录多个微信账号。对于华为手机用户来说,实现双微信登录并不困难,本文将介绍华为手机如何实现双微信登录的方法。首先,华为手机自带的EMUI系统提供了一个很便利的功能——应用双开。通过应用双开功能,用户可以在手机上同

网络连不上wifi怎么回事 网络连不上wifi怎么回事 Apr 03, 2024 pm 12:11 PM

1、检查wifi密码:确保自己输入的wifi密码是正确的,注意区分大小写。2、确认wifi是否正常工作:检查wifi路由器是否正常运行,可将其他设备连接至同一路由器,以确定问题是否出在设备上。3、重启设备和路由器:有时候,设备或路由器出现故障或网络问题,重启设备和路由器可能会解决问题。4、检查设备设置:确保设备无线功能处于开启状态,并且未将wifi功能禁用。

Windows 11 文件夹共享指南:轻松分享你的文件和资料 Windows 11 文件夹共享指南:轻松分享你的文件和资料 Mar 13, 2024 am 11:49 AM

在日常生活和工作中,我们经常需要在不同设备之间共享文件和文件夹。Windows11系统提供了方便的内建文件夹共享功能,让我们可以轻松地在同一网络内安全地与他人分享所需内容,同时保护个人文件的隐私。这项功能使文件共享变得简单而高效,不必担心泄露私人信息。通过Windows11系统的文件夹共享功能,我们可以更加便捷地进行合作、交流和协作,提高工作效率和生活便利性。为了顺利配置共享文件夹,我们首先需要满足以下条件:所有(参与共享的)设备都连接到同一个网络。启用「网络发现」并配置好共享。知道目标设备中的

PHP编程指南:实现斐波那契数列的方法 PHP编程指南:实现斐波那契数列的方法 Mar 20, 2024 pm 04:54 PM

编程语言PHP是一种用于Web开发的强大工具,能够支持多种不同的编程逻辑和算法。其中,实现斐波那契数列是一个常见且经典的编程问题。在这篇文章中,将介绍如何使用PHP编程语言来实现斐波那契数列的方法,并附上具体的代码示例。斐波那契数列是一个数学上的序列,其定义如下:数列的第一个和第二个元素为1,从第三个元素开始,每个元素的值等于前两个元素的和。数列的前几个元

excel抽奖小程序如何制作 excel抽奖小程序如何制作 Mar 20, 2024 am 11:40 AM

平时的工作中会遇到很多需要抽签进行的内容,传统的方法还是用纸质的号码随机抽号,随着电子软件的发展,我们可以用电脑制作抽签,今天欠们给大家分享的课程是excel抽奖小程序如何制作。1、首先我们打开Excel软件,打开我们准备好的表格,表格中要包含我们人的名字。  2、接着我们对右边的单元格进行合并,将今晚谁幸运填充为黑色,并将下方的单元格合并填充为红色,如下图所示。  3、接着我们在红色区域中输入randbetween函数,设置第一行为2,最后一行为7,如下图所示。  4、接着我们在前面输入ind

如何在华为手机上实现微信分身功能 如何在华为手机上实现微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视,微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号,方便管理和使用。在华为手机上实现微信分身功能并不困难,只需要按照以下步骤操作即可。第一步:确保手机系统版本和微信版本符合要求首先,确保你的华为手机系统版本已更新到最新版本,以及微信App

蓝色星原旅谣是哪个公司的 蓝色星原旅谣是哪个公司的 Mar 22, 2024 pm 03:41 PM

蓝色星原旅谣在近期公布宣传片之后登上了游戏热榜,许多玩家都非常好奇蓝色星原旅谣是哪个公司的,其实是来自上海二次元厂商蛮啾新作,下面小编会为大家带来蓝色星原旅谣游戏公司介绍,快来一起看看吧。蓝色星原旅谣是哪个公司的答:是蛮啾网络推出的。1、首先蓝色星原旅谣是蛮啾旗下大世界RPG所推出的一款游戏,已经于3月20日公布了宣传片。2、这款产品在2023年10月拿到版号。游戏的商标及运营单位均登记在一家叫的公司名下,后者成立于2023年2月,官网显示其总部位于新加坡。3、此次发布的11分钟宣传片里透露出这

See all articles