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

php+jQuery实现网络转盘抽奖

Jun 06, 2016 pm 07:58 PM
company accomplish lottery network Turntable

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

Copy after login

2.php程序处理页
<?php $prize_arr=array(
        &#39;0&#39;=>array('id'=&gt;1,'min'=&gt;1,'max'=&gt;29,'prize'=&gt;'一等奖','v'=&gt;1),
        '1'=&gt;array('id'=&gt;2,'min'=&gt;302,'max'=&gt;328,'prize'=&gt;'二等奖','v'=&gt;2),
        '2' =&gt; array('id'=&gt;3,'min'=&gt;242,'max'=&gt;268,'prize'=&gt;'三等奖','v'=&gt;5),
        '3' =&gt; array('id'=&gt;4,'min'=&gt;182,'max'=&gt;208,'prize'=&gt;'四等奖','v'=&gt;7),
        '4' =&gt; array('id'=&gt;5,'min'=&gt;122,'max'=&gt;148,'prize'=&gt;'五等奖','v'=&gt;10),
        '5' =&gt; array('id'=&gt;6,'min'=&gt;62,'max'=&gt;88,'prize'=&gt;'六等奖','v'=&gt;25),
        '6' =&gt; array('id'=&gt;7,'min'=&gt;array(32,92,152,212,272,332),
                                         'max'=&gt;array(58,118,178,238,298,358),'prize'=&gt;'七等奖','v'=&gt;50)
);

//概率函数
function getRand($proArr) {
    $result = '';
     //概率数组的总概率精度
    $proSum = array_sum($proArr);
     //概率数组循环
    foreach ($proArr as $key =&gt; $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;
?&gt;
Copy after login


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if the earth is displayed in the lower right corner of Windows 10 when I cannot access the Internet? Various solutions to the problem that the Earth cannot access the Internet in Win10 What should I do if the earth is displayed in the lower right corner of Windows 10 when I cannot access the Internet? Various solutions to the problem that the Earth cannot access the Internet in Win10 Feb 29, 2024 am 09:52 AM

What should I do if the earth is displayed in the lower right corner of Windows 10 when I cannot access the Internet? Various solutions to the problem that the Earth cannot access the Internet in Win10

What's going on when the network can't connect to the wifi? What's going on when the network can't connect to the wifi? Apr 03, 2024 pm 12:11 PM

What's going on when the network can't connect to the wifi?

How to implement dual WeChat login on Huawei mobile phones? How to implement dual WeChat login on Huawei mobile phones? Mar 24, 2024 am 11:27 AM

How to implement dual WeChat login on Huawei mobile phones?

Windows 11 Folder Sharing Guide: Easily Share Your Files and Data Windows 11 Folder Sharing Guide: Easily Share Your Files and Data Mar 13, 2024 am 11:49 AM

Windows 11 Folder Sharing Guide: Easily Share Your Files and Data

How to make an excel lottery applet How to make an excel lottery applet Mar 20, 2024 am 11:40 AM

How to make an excel lottery applet

How to implement the WeChat clone function on Huawei mobile phones How to implement the WeChat clone function on Huawei mobile phones Mar 24, 2024 pm 06:03 PM

How to implement the WeChat clone function on Huawei mobile phones

Which company does the Hands app belong to? Which company does the Hands app belong to? Mar 13, 2024 am 11:10 AM

Which company does the Hands app belong to?

Which company does Blue Star Travel Yao belong to? Which company does Blue Star Travel Yao belong to? Mar 22, 2024 pm 03:41 PM

Which company does Blue Star Travel Yao belong to?

See all articles