用jquery实现抽奖小程序
这些日子，到处都可以看到关于微信小程序的新闻或报到，在博客园中写关于微信小程序的也不少。但是今天我要说的不是微信小程序，而是用简单的jquery写的一个好玩的抽奖小程序。最后介绍了后面关于抽奖小程序的一些后面更新的方向和Math.random的一些小知识。（最终结果保存在：，点击可查看效果）
下面先看一个简单的抽奖小程序的例子：
html：
<div> <div> <a href="javascript:;" title="开始抽奖"></a> </div> </div>
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="https://www.jb51.net/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script> * <script src="https://www.jb51.net/js/jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script> * <script src="https://www.jb51.net/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、我们修改判断条件