| JS实现抽奖转盘 | 您所在的位置：网站首页 › php小游戏抽奖 › JS实现抽奖转盘 |
JS实现抽奖转盘
|
超级简单的原理： 点击转盘指针后随机得到一个数(每个数字对应一个奖项),并确定每个奖项在轮盘上的大概角度，然后调用 jqueryRotate.js插件来转动轮盘，并停在奖品的对应角度。 使用的插件 jquery.js jqueryRotate.js //旋转插件 附赠链家：rotate.js使用说明 https://www.jianshu.com/p/b632a1ed6a57 实现的效果
HTML 
CSS
JS $(function(){ var bRotate=false; $("#pointer").click(function(){ if(bRotate) return false; var item=rnd(0,10); //生成0~10的随机数 console.log(item); switch(item){ case 0: rotateFn(337,'未中奖'); break; case 1: rotateFn(26, '免单4999元'); break; case 2: rotateFn(88, '免单50元'); break; case 3: rotateFn(137, '免单10元'); break; case 4: rotateFn(185, '免单5元'); break; case 5: rotateFn(185, '免单5元'); break; case 6: rotateFn(235, '免分期服务费'); break; case 7: rotateFn(287, '提高白条额度'); break; case 8: //增加"未中奖"概率 rotateFn(337, '未中奖'); break; case 9: rotateFn(337, '未中奖'); break; case 10: rotateFn(0, 337, '未中奖'); break; } }) function rnd(n,m){ var num=Math.floor(Math.floor(Math.random()*(m-n+1)+n)) return num; } function rotateFn(angles,txt){ //控制轮盘在angle度停下 bRotate=!bRotate; $('#turntable').stopRotate(); $("#turntable").rotate({ angle:0, //旋转的角度 animateTo:angles+1800, //从当前角度旋转多少度 duration:3000, //持续时间 callback:function(){ //回调函数 alert(txt); bRotate=!bRotate; } }) } }) 不知道朋友们有没有发现，这个抽奖转盘中奖率会不会太高了一点，这要是用于实际操作岂不是要亏到死，所以接下来我们就要改变它的中奖概率啦 方法一：往前面的JS看，在case 8 ,9 ,10是不是都是在重复操作，这是在干什么呢？…最笨的方法，增加“未中奖”的 概率，通过增加随机数（原本只需要在07中选，现在在010中选，有4/11的可能性不中奖）来增加不中奖 的 可能性 方法二：在0~7中抽取随机数的时候，如果抽到的是“1”（免单4999元），我就让它不要这个随机数，继续产生一个随 机数，如果又抽到“1”，我就还让他继续产生随机数，如果它还调皮继续是“1”，那么我就让它继续产生随机 数，一直到不是1就让它return。 说了这么多…还不如直接上代码 function rnd(n, m){ var num=Math.floor(Math.random()*(m-n+1)+n) //在0~7中找一个随机数 //设置概率 if(num==0||num==4||num==5||num==7){ return num; } else{ num=Math.floor(Math.random()*(m-n+1)+n); if(num==0||num==4||num==5||num==7||num==3){ return num; } else{ num=Math.floor(Math.random()*(m-n+1)+n); if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){ return num } else{ num=Math.floor(Math.random()*(m-n+1)+n); if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){ return num } else{ num=Math.floor(Math.random()*(m-n+1)+n); if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){ return num } else{ num=Math.floor(Math.random()*(m-n+1)+n); //抽到“免单4999元”的概率是1/117649 return num; } } } } } }这种方法有什么不好呢？相信大家能看出来，实在是太多冗余的代码了！！ 方法三“方法三” = “方法一” + “方法二” 不知道大家还有什么好的改变概率的方法，还请大佬们赐教 (●’◡’●) 完整的代码和图片素材下载，请点击这里【https://download.csdn.net/download/qq_36828433/10867217】 |
【本文地址】
公司简介
联系我们