jquery——九宫格大转盘抽奖

第一种：

HTML代码为：

<div class="reglot_activity">
  <div id="reglot_box">
    <div class="reglot_table">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td class="reglot_unit reglot-unit-0"><img src="images/reglot_tr0.png" alt="">巴塞罗那毛巾</td>
          <td class="reglot_unit reglot-unit-1"><img src="images/reglot_tr1.png" alt="">正品球衣</td>
          <td class="reglot_unit reglot-unit-2"><img src="images/reglot_tr2.png" alt="">三冠王记念帽子</td>
        </tr>
        <tr>
          <td class="reglot_unit reglot-unit-7"><img src="images/reglot_tr7.png" alt="">100M流量</td>
          <td id="reglot-btn"><a><img src="images/reglot_tr-btn.png" alt=""></a></td>
          <td class="reglot_unit reglot-unit-3"><img src="images/reglot_tr3.png" alt="">球队抱枕</td>
        </tr>
        <tr>
          <td class="reglot_unit reglot-unit-6"><img src="images/reglot_tr6.png" alt="">5金币</td>
          <td class="reglot_unit reglot-unit-5"><img src="images/reglot_tr5.png" alt="">20金币</td>
          <td class="reglot_unit reglot-unit-4"><img src="images/reglot_tr4.png" alt="">50金币</td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div id="reglot_mask">
  <div class="reglot_m_title">
    <div>恭喜你得到巴塞球衣一件</div>
  </div>
  <div class="reglot_m_btn df">
    <a href="javascript:void(0);" id="reglog_btn_certain">确认</a>
    <a href="javascript:void(0);" id="reglog_btn_share">分享</a>
  </div>
</div>

JS代码为：

var lottery={
  index:-1, //当前转动到哪一个位置，起点位置(上一个位置)
  count:0,  //总共有多少个位置
  timer:100,  //setTimeout的ID，用clearTimeout清除
  speed:20, //初始转动速度
  times:0,  //转动次数
  cycle:50, //转动基本次数：即至少须要转动多少次再进入抽奖环节
  prize:-1, //中奖位置
  init:function(id){
    if ($("#"+id).find(".reglot_unit").length>0) {
      $lottery = $("#"+id);
      $units = $lottery.find(".reglot_unit");
      this.obj = $lottery;
      this.count = $units.length;
      $lottery.find(".reglot-unit-"+this.index).addClass("active");
    };
  },
  roll:function(){
    var index = this.index;
    var count = this.count;
    var lottery = this.obj;
    $(lottery).find(".reglot-unit-"+index).removeClass("active");
    index += 1;
    if (index>count-1) {
      index = 0;
    };
    $(lottery).find(".reglot-unit-"+index).addClass("active");
    this.index=index;
    return false;
  },
  stop1:function(index){
    this.prize=index;
    return false;
  },
  open:function(){
    $("#reglot_mask").show();
    $('#reglot_mask .reglot_m_title div').html('恭喜你活得5金币。点击分享能额外得到一次抽奖机会哦！');
  }
};
function roll1(){
  lottery.times += 1;
  lottery.roll();
  if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
    clearTimeout(lottery.timer);
    lottery.open();
    lottery.prize=-1;
    lottery.times=0;
    click=false;
  }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;
    };
    //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
    lottery.timer = setTimeout(roll1,lottery.speed);
  }
  return false;
}
var click=false;
window.onload=function(){
    lottery.init('reglot_box');
    $("#reglot_box a").click(function(){
        if (click) {//click控制一次抽奖过程当中不能重复点击抽奖按钮，后面的点击不响应
            return false;
        }else{
            lottery.speed=100;
            roll1();    //转圈过程不响应click事件，会将click置为false
            click=true; //一次抽奖完成后，设置click为true，可继续抽奖
            return false;
        }
    });
};
 $("#reglog_btn_certain").click(function() {
    $(this).parents('#reglot_mask').hide();
  });

//window.onload=function(){
//  lottery.init('reglot_box');
// $("#reglot_box a").click(function(){
//    $.ajax({
//      type:'GET',
//      url:cid_url+'/api/lottery/do_lottery',
//      dataType:'json',
//      success:function(data){
//        if(data.code===401){
//          shellmodule.login(data.message);
//       }else{
//           if (click) {
//               return false;
//           }else{
//                lottery.speed=100;
//                roll1();
//         // alert(data.data.yes);
//          click=true;
//           return false;
//        }
//      }
      
//      },
 //     error:function(){
 //       showmsg('返回异常');
 //     }
 //   })
 // });
//};

本地效果为：game/jiugonggechoujiang/index.html

线上效果为：http://cid.5usport.com/api/lottery

线上下载:http://www.ffpic.com/jiaoben/150828206296.html

            http://www.cnblogs.com/starof/p/4933907.html