jquery 根据概率抽奖源码

抽奖代码示例：

HTML：

<div id="lottery">
  <ul class="lottery-list">
    <li>奖品1</li>
    <li>奖品2</li>
    <li>奖品3</li>
    <li>奖品4</li>
    <li>奖品5</li>
    <li>奖品6</li>
    <li>奖品7</li>
    <li>奖品8</li>
  </ul>
  <button class="btn-start">开始抽奖</button>
</div>

CSS：

#lottery {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

.lottery-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lottery-list li {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #000;
  margin-right: 10px;
  margin-bottom: 10px;
}

.btn-start {
  margin-top: 20px;
}

JavaScript：

$(function() {
  var lottery = {
    index: -1, // 当前转动到哪个位置，起点位置
    count: 0, // 总共的奖品数
    timer: 0, // setTimeout的ID，用clearTimeout清除
    speed: 20, // 初始转动速度
    times: 0, // 转动次数
    cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1, // 中奖位置
    init: function(id) {
      if ($("#" + id).find(".lottery-list li").length > 0) {
        $lottery = $("#" + id);
        $items = $lottery.find(".lottery-list li");
        this.obj = $lottery;
        this.count = $items.length;
        $lottery.find(".lottery-list li:first").addClass("active");
      }
    },
    roll: function() {
      var index = this.index;
      var count = this.count;
      var lottery = this.obj;
      $(lottery).find(".lottery-list li").removeClass("active");
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      $(lottery).find(".lottery-list li:eq(" + index + ")").addClass("active");
      this.index = index;
      return false;
    },
    stop: function(index) {
      this.prize = index;
      return false;
    }
  };

  function roll() {
    lottery.times += 1;
    lottery.roll();
    if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
      clearTimeout(lottery.timer);
      lottery.prize = -1;
      lottery.times = 0;
      click = false;
      alert("恭喜您中奖了！");
    } else {
      if (lottery.times < lottery.cycle) {
        lottery.speed -= 10;
      } else if (lottery.times == lottery.cycle) {
        var index = Math.random() * (lottery.count) | 0;
        lottery.prize = index;
      } else {
        if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
          lottery.speed += 110;
        } else {
          lottery.speed += 20;
        }
      }
      if (lottery.speed < 40) {
        lottery.speed = 40;
      }
      lottery.timer = setTimeout(roll, lottery.speed);
    }
    return false;
  }

  var click = false;

  $(document).ready(function() {
    lottery.init('lottery');
    $(".btn-start").click(function() {
      if (click) {
        return false;
      } else {
        lottery.speed = 100;
        roll();
        click = true;
        return false;
      }
    });
  });
});

解释：

index：当前转动到哪个位置，起点位置为-1。
count：总共的奖品数。
timer：setTimeout的ID，用clearTimeout清除。
speed：初始转动速度。
times：转动次数。
cycle：转动基本次数，即至少需要转动多少次再进入抽奖环节。
prize：中奖位置，初始值为-1。
init方法：初始化转盘，获取转盘的奖品数。
roll方法：每次转动的方法，把当前位置的li标签的active类移除，将下一个li标签的active类添加，最后更新index的值。
stop方法：停止转动的方法，传入的参数为中奖的位置。
roll函数：抽奖主体函数，每次调用roll方法更新转盘的位置，根据设定的规则计算速度，最后判断中奖位置。
click：判断是否已经点击过开始抽奖按钮的标志位。
页面加载完成后初始化转盘，然后监听开始抽奖按钮的点击事件，如果已经点击过了则返回false，否则设定转盘速度然后开始转动，并将click设置为true，防止再次点击。
当转动次数超过设定的基本次数并且中奖位置已经确定时，清除定时器，将prize设置为-1，times设置为0，将click设置为false，然后弹出中奖信息的提示框。