分享jquery抽奖小程序实现方法（代码）

这些日子，到处都可以看到关于微信小程序的新闻或报到，在博客园中写关于微信小程序的也不少。但是今天我要说的不是微信小程序，而是用简单的jquery写的一个好玩的抽奖小程序。最后介绍了后面关于抽奖小程序的一些后面更新的方向和Math.random的一些小知识。（最终结果保存在：http://runjs.cn/detail/rq3bbhto，点击可查看效果）

下面先看一个简单的抽奖小程序的例子：

html：

css：

*{margin: 0; padding: 0;}.g-lottery-box {  width: 400px;  height: 400px;  margin-left: 30px;  position: relative;  background: url(images/0.gif) no-repeat;  margin: 0 auto;}    .g-lottery-box .g-lottery-img {  width: 340px;  height: 340px;  position: relative;  background: url(images/1.png) no-repeat;  left: 30px;  top: 30px;}      .g-lottery-box #clik {  width: 186px;  height: 186px;  position: absolute;  top: 77px;  left: 77px;  background: url(images/2.png) no-repeat;}

js：

/* 注意引用的顺序 * <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8">《script》   * <script src="js/jquery.rotate.min.js" type="text/javascript" charset="utf-8">《script》 * <script src="js/demo.js" type="text/javascript" charset="utf-8">《script》 * * Creat By foodoir 2010-10-11 * * */var raNum;//注意：要将raNum设置为全局变量，容易出错$(function() {  $('#clik').click(function() {    //    raNum = Math.random()*360;    $(this).rotate({      duration:3000,      angle:0,      animateTo:raNum+720+360,      callback:function(){        A();      }    });  });});function A(){    if(0 < raNum && raNum <= 30){    alert("恭喜您抽到理财金2000元！");    return;  }else if(30 < raNum && raNum <= 90){    alert("谢谢参与~再来一次吧~");    return;  }else if(90 < raNum && raNum <= 150){    alert("恭喜您抽到理财金5200元！");    return;  }else if(150 < raNum && raNum <= 210){    alert("恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!");    return;  }else if(210 < raNum && raNum <= 270){    alert("谢谢参与~再来一次吧~");    return;  }else if(270 < raNum && raNum <= 330){    alert("恭喜您抽到理财金1000元！");    return;  }else if(330 < raNum && raNum <= 360){    alert("恭喜您抽到理财金2000元！");    return;  }}

关于小程序的一些思考：

思考一：在A()方法中用了很多if…else，让代码看上去不是那么的优美，有没有什么办法可以让代码看上去又没一点？

解决思路：用switch方法

switch(data) {  case 1:    rotateFunc(1, 0, '恭喜您获得2000元理财金!');    break;  case 2:    rotateFunc(2, 60, '谢谢参与~再来一次吧~');    break;  case 3:    rotateFunc(3, 120, '恭喜您获得5200元理财金!');    break;  case 4:    rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');    break;  case 5:    rotateFunc(5, 240, '谢谢参与~再来一次吧~');    break;  case 6:    rotateFunc(6, 300, '恭喜您获得1000元理财金!');    break;}//后面还需要定义函数rotateFunc，在这里直接使用另外一种方法来完成var rotateFunc = function(awards, angle, text) {  isture = true;  $btn.stopRotate();  $btn.rotate({    angle: 0,    duration: 4000, //旋转时间    animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转    callback: function() {      isture = false; // 标志为 执行完毕      alert(text);    }  });};

思考二：实际中的大转盘可以转好几圈，而此时的效果转了不到一圈，我想要看到转几圈的效果怎么办？

解决思路：animateTo:raNum在这后面加上360乘以想要转的圈数的结果，（以抽奖三次为例）

animateTo:raNum+360*3

思考三：我们可不可以对抽奖次数进行限制？

解决思路：（以抽奖三次为例）

$(function() {  var i =0;  $('#clik').click(function() {    i++;    if(i>3){      alert("您的抽奖机会已经用完！");    }    //代码省略  });});

思考四：按照前面的思路，按理说每次抽奖能中的概率为1/3，但是我们在实际中并不是那么的想让用户抽中，我们该怎么办？

解决思路：1、我们直接改变raNum，（假如不想让用户获得e卡）

raNum = Math.random()*360;if(150 < raNum && raNum <= 210){  raNum += 60;}

2、我们修改判断条件

else if(150 < raNum && raNum <= 210){    //再将概率减小到1%    var n = Math.random()*100;    if(n<1){      alert("恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!");    }else{      raNum += 60;    }    return;  }

思考五：对于抽奖剩余次数，我们可不可以提醒用户？

解决思路：创建一个新的变量，然后通过DOM方法显示出来

欢迎来到foodoir抽奖小程序，您还有3次抽奖机会
h3{  text-align: center;  font-family: "微软雅黑", "microsoft yahei";  line-height: 60px;}h3 span{  font-size: 40px;  line-height: 60px;  font-family: elephant;  display: inline-block;  padding: 5px 20px;  border: 2px solid red;  border-radius: 10px;  color: #f00;  background-color: yellow;}var ii = 3-i;if(ii>=0){  $('#ii').html(ii);}

思考六：在我们玩扣扣游戏时，经常会看到有滚动屏提示刚刚有谁谁抽到了奖，我们该如何实现？

解决思路：这个需要我们在后台调数据，但是我们可以先自己设置数据并查看效果，我们还可以用Javascript中的Date

恭喜foodoir抽到京东e卡！！！！
var now =new Date();var hours = now.getHours();var minutes = now.getMinutes();var seconds = now.getSeconds();var t = hours+":"+minutes+":"+seconds;$('#time').html(t);

到这里，我们的小程序的效果就成这样了：

var MAX_RAND = Math.pow(2, 32);var state = [seed(), seed()];var mwc1616 = function mwc1616() {  var r0 = (18030 * (state[0] & 0xFFFF)) + (state[0] >>> 16) | 0;  var r1 = (36969 * (state[1] & 0xFFFF)) + (state[1] >>> 16) | 0;  state = [r0, r1];   var x = ((r0 << 16) + (r1 & 0xFFFF)) | 0;  if (x < 0) {    x = x + MAX_RAND;  }  return x / MAX_RAND;}

　　上述代码就是 V8 PRNG 的核心逻辑。在老版本的 V8 源码中对此有一段注释：“随机数生成器使用了 George Marsaglia 的 MWC 算法。”根据这段注释，我从谷歌搜索到了以下信息：

George Marsaglia 是一个毕生致力于 PRNG 的数学家，他还开发了用于测试随机数生成质量的工具Diehard tests
MWC（multiply-with-carry）是由 Marsaglia 发明的 PRNG 算法，非常类似于 LCG（linear congruential generators，线性同余法），其优势在于生成的循环周期更长，接近于 CPU 的循环周期。

　　不过，V8 PRNG 与经典的 MWC 生成器并不相同，因为它不是对 MWC 生成器的简单扩展，而是组合使用了两个 MWC 子生成器（r0 和 r1），并最终拼接成一个随机数。这里略过相关的数学计算，只说结论，每个子生成器最长的循环周期长度都是 2^30，合并后为 2^60。

　　前面提到过，我们定义的标识符有 2^132 种可能性，所以 V8 的 Math.random() 并不能满足这一需求。尽管如此，我们仍使用该函数并假设生成的随机数是均匀分布的，那么生成一亿个标识符后出现碰撞的可能性才只有 0.4%，但现在发生碰撞的时间也太早了，所以我们的分析一定有什么地方出错了。之前已经证明循环周期长度是正确的，那么很有可能生成的随机数不是均匀分布的，一定有其他的结构影响了生成的序列。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

以上就是分享jquery抽奖小程序实现方法（代码）的详细内容，更多请关注 第一PHP社区 其它相关文章！