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