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
最近公司在搞节日活动,进行抽奖活动,无奈奖品很诱人,但是都是摆设,在网上找了一下,又加上自己的改进
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:'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(){ var con = confirm('恭喜你,中得'+p+'\n还要再来一次吗?'); 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( '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) ); //概率函数 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; ?>

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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?

How to implement dual WeChat login on Huawei mobile phones?

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

How to implement the WeChat clone function on Huawei mobile phones

Which company does the Hands app belong to?

Which company does Blue Star Travel Yao belong to?
