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

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

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

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version
SublimeText3 Linux latest version

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.