国内个人网站欣赏,广州地铁最新,泰州网站制作专业,微信公众号影视网站怎么做phpjquery实现转盘抽奖 概率可任意调phpjquery实现转盘抽奖 概率可任意调Posted by: xiaomiao 2014/05/13in Code, PHP 3 Commentsphpjquery实现转盘抽奖查看DEMO演示转盘抽奖#xff0c;炫丽的一般是flash做的。不懂flash而又不需要那么炫丽#xff0c;可以简单的通过jquer…phpjquery实现转盘抽奖 概率可任意调phpjquery实现转盘抽奖 概率可任意调Posted by: xiaomiao 2014/05/13in Code, PHP 3 Commentsphpjquery实现转盘抽奖查看DEMO演示转盘抽奖炫丽的一般是flash做的。不懂flash而又不需要那么炫丽可以简单的通过jquery来实现。网上教程有很多跟着做了一下也贴出来吧。要实现转盘抽奖有两个关键点一是让转盘或指针转起来并控制停止角度一是概率控制。对于转起来控制停止角度这个问题网上各教程都是用的jqueryrotate这个jquery插件兼容性好使用也简单要我本人自己写也不知道怎么写好还是拿来即可。对于概率控制网上也一致的是这个经典算法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;}这里参数是一个概率数组某一项的出现的概率是其概率精度/总概率精度。比如概率数组是array(’1′’40′,’2′’60′)那么‘1’这一项出现的概率就是40/(4060)。为什么是这个结果呢好吧简单的概率计算php经典概率算法解析php经典概率算法解析(原谅我为了输这分数还去百度了一下囧…)对于概率数组的来源实际应用中应该是从数据库里面取这样方便做各种业务判断比如某一奖项的概率除了人工干预还根据抽中次数自动变化。我这里为了显示就写到一个数组里面而且这找的转盘素材同一奖项还有多处出现故用这样一个数组来存储(这里根据实际业务而定不是重点)。//奖项数据$prize_arrarray(youpanarray(anglearray(16-40,196-220),prizeU盘1个,v10),money_2000array(anglearray(46-74,170-194),prize2000元代金卷,v5),chong_10array(anglearray(80-104,226-250),prize10元充值卡,v10),money_1000array(anglearray(110-134,256-284),prize1000元代金卷,v15),flowerarray(anglearray(144-164,286-306),prize鲜花1朵继续努力,v45),chong_50array(anglearray(316-340),prize50元充值卡,v5),bookarray(anglearray(0-10,346-359),prize书1本,v10),);angel是角度最小角度与最大角度用‘-’隔开有多个。这个角度是控制转盘或指针最终停下来时离起点的角度范围是0~360。根据实际素材而定我这找的图不规则作图的人坑爹调了多次才得到比较精准的角度。v则是概率。根据上面的奖项设定通过下面的函数返回转动信息到前台//获得旋转信息function getRotate($prize_arr) {$dataarray();$option$_GET;//根据前台的选择更改原定默认概率foreach($prize_arr as $k$v) {$v[v]$option[$k];}$prizegetPrize($prize_arr);//通过概率原理设计函数获得其中一个奖项$angle$prize[angle];shuffle($angle);//打乱角度数组$angle$angle[0];$angle_arrexplode(-,$angle);$min$angle_arr[0];$max$angle_arr[1];$anglemt_rand($min,$max);$data[angle]$angle;$data[message]$prize[prize];$data[duration]mt_rand(2,5)*1000;$data[n]mt_rand(3,6);//为了不那么单调随机一下转动时间和转动圈数echo json_encode($data);}至此后端的程序完毕。前端还得有个调整概率的功能脑子里想到的就是滑动条html5有这个特性但样式简单也兼容性也有问题。百度了一下知道jqueryui有相关控件但不怕笑话作为新人还没用过jqueryui无意发现了noUiSlider这个专为不使用jqueryui实现滑动条而生的插件短小精悍。最近又瞄了瞄BootStrap顺手又拿来排版一下这前端页面好吧基本没用到它的什么东西。现在时间凌晨152夜已深后面继续。。。2014/5/14 23:13继续。对于改变概率值上边说了使用noUiSlider用法可以到官网查看$(.youpan).noUiSlider({start:[10],//起始值range:{//范围min:0,max:99,},connect:lower,//写上左边就变色serialization: {lower: [$.Link({target: $(#youpan)//数值在哪里显示})],format: {decimals: 0,//数值保留几位小数mark: ,}}});在页面加载函数里边给每个需要滑动的元素绑定以上事件即可。更改各项值放在一个form表单点击开始抽奖收集表单的信息ajax发送到后台计算出具体的旋转信息再进行转动抽奖。发送ajax的函数如下function getPrize() {var resultnull;var option$(#myform).serialize();$.ajax({url:03.php,type:GET,data:option,dataType:json,cache:false,async:false,//同步否则无法把后台信息信息捕获error:function(){alert(出错了);return false;},success:function(data){resultdata;}});return result;}接下来是关键的根据后台的信息进行转动并控制停止角度主要是jqueryrotate的用法详细的可以点击上边高亮的链接查看。下边也有注释function rotate() {$(#start).css(cursor,pointer);$(#start).rotate({bind:{click:function(){$(this).unbind(click).css(cursor,default);//取消点击事件var valuegetPrize();var effect$(#select).val();$(this).rotate({duration:value.duration,//多少毫秒内完成转动angle:0,//起始角度animateTo:value.n*360value.angle,//一共转动多少角度easing:eval(effect),//转动动画扩展callback:function(){//结束时的回调函数alert(value.message);}})}}})}转动动画那里注意得eval()一下否则得到的只是一个字符串不是动画函数。这个动画也是用的jQuery Easing这个插件插件再借用插件很常见的事什么都自己写是很不现实的童鞋。这些动画效果用在这里有一两个动不了不知为何。把这个rotate函数放到页面加载函数中在页面加载完毕即可进行转动抽奖。点击之后取消点击事件是为了防止转动过程中或者抽完一次后继续点击。当然我这里有“再来一发”就是给再绑上。具体看业务需要怎么搞都行。至此一个简单的转盘抽奖就完成了虽然简陋了点但也能满足一般的业务需要。有什么问题或者改进意见欢迎各位看官提出。^~^update2015/06/17鉴于有同学说不懂03.php里边的内容顺便贴出来吧。按需修改。//奖项数据$prize_arrarray(youpanarray(anglearray(16-40,196-220),prizeU盘1个,v10),money_2000array(anglearray(46-74,170-194),prize2000元代金卷,v5),chong_10array(anglearray(80-104,226-250),prize10元充值卡,v10),money_1000array(anglearray(110-134,256-284),prize1000元代金卷,v15),flowerarray(anglearray(144-164,286-306),prize鲜花1朵继续努力,v45),chong_50array(anglearray(316-340),prize50元充值卡,v5),bookarray(anglearray(0-10,346-359),prize书1本,v10),);//根据奖项数据获得具体奖项function getPrize($prize_arr) {$proSum0;foreach($prize_arr as $v){$proSum$v[v];}foreach($prize_arr as $k$v){$randNummt_rand(1,$proSum);//随机数if($randNum$v[v]) {return $v;}else{$proSum-$v[v];}}}//获得旋转信息function getRotate($prize_arr) {$dataarray();$option$_GET;foreach($prize_arr as $k$v) {$v[v]$option[$k];}$prizegetPrize($prize_arr);$angle$prize[angle];shuffle($angle);//打乱$angle$angle[0];$angle_arrexplode(-,$angle);$min$angle_arr[0];$max$angle_arr[1];$anglemt_rand($min,$max);$data[angle]$angle;$data[message]$prize[prize];$data[duration]mt_rand(2,5)*1000;$data[n]mt_rand(3,6);echo json_encode($data);//echo json_encode($option);}
