jquery 抽奖小程序实现代码

用jquery实现抽奖小程序

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

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

html：

<div class="g-lottery-box">
  <div class="g-lottery-img">
    <a class="playbtn" 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="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方法显示出来

<h3>欢迎来到foodoir抽奖小程序，您还有<span id="ii">3</span>次抽奖机会</h3>

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);

}

<div class="mar">
<marquee><span id="time"></span>恭喜foodoir抽到京东e卡！！！！</marquee>
</div>

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;
}