js抽奖程序（跑马灯效果）

显示效果图：

<divid="gameContent">
       <tableid="gameTable">
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>16</td><td></td><td></td><td></td><td>6</td></tr>
        <tr><td>15</td><td></td><td></td><td></td><td>7</td></tr>
        <tr><td>14</td><td></td><td></td><td></td><td>8</td></tr>
        <tr><td>13</td><td>12</td><td>11</td><td>10</td><td>9</td></tr>
       </table>
      <p><aid="gameBtn"></a></p><!--这个就是中间的表情按钮-->
 </div>

#gameContent{
position:absolute
;right:19px;
top:19px;
width:360px;
}
#gameContent table{
 float:right;
border-collapse:separate;
border-spacing: 2px;
}
#gameContenttd{
width:30px;
height:30px;
text-align:center;
vertical-align:middle;
border:1pxsolid #ffdd99; background:#fff9ed;
}
#gameContentp{
position:absolute;
right:36px;top:36px;
width:100px;
height:100px;
background:url("../image/game.jpg") no-repeat 0 0;
padding-left:0;
}
#gameContent p.waitGame{
background:url("../image/game.jpg") no-repeat -200px 0;
}
#gameBtn{
z-index:999;
display:block;
width:100px;
height:100px;
}
#gameBtn:hover{
cursor:pointer;
background:url("../image/game.jpg")no-repeat -100px 0;
}

function GetSide(m, n) {
    //初始化数组
    var arr = [];
    for (var i = 0; i< m; i++) {
       arr.push([]);
       for (var j = 0; j < n; j++){
           arr[i][j]= i * n + j;
       }
    }
    //获取数组最外圈
    var resultArr =[];
    var tempX = 0,
tempY = 0,
direction = "Along",
count = 0;
    while (tempX>= 0 && tempX< n && tempY>= 0 && tempY< m && count< m * n) {
       count++;
       resultArr.push([tempY, tempX]);
       if (direction == "Along") {
           if (tempX== n - 1)
              tempY++;
           else
              tempX++;
           if (tempX== n - 1 && tempY == m - 1)
              direction = "Inverse"
       }
       else {
           if (tempX== 0)
              tempY--;
           else
              tempX--;
           if (tempX== 0 && tempY == 0)
              break;
       }
    }
    return resultArr;
}

$(document).ready(function () {
    var index = 0,         //当前亮区位置
      prevIndex = 0,        //前一位置
      Speed = 300,         //初始速度
      Time,          //定义对象
      arr = GetSide(5, 5),       //初始化数组
      EndIndex = 0,         //决定在哪一格变慢
      cycle = 0,          //转动圈数  
      EndCycle = 0,         //计算圈数
      flag = false,         //结束转动标志 
      quick = 0,         //加速
      gameTable =document.getElementByIdx_x("gameTable");
   $("#gameBtn").click(function () {
       var stopNum = Math.floor(Math.random() * 15 +1);//点击产生随机数，最后将停在次数上
       $.cookie("stopNum",stopNum);//存入cookie,使得全局可以调用
       $(this).hide(); //开始后隐藏开始按钮
       $(this).parent().addClass("waitGame");
       cycle = 0;
       flag = false;
       EndIndex = Math.floor(Math.random() * 16);
       EndCycle = 1;
       Time = setInterval(Star, Speed);
    });

    function Star(num){
      gameTable.rows[arr[index][0]].cells[arr[index][1]].style.border ="1px solid pink";
      gameTable.rows[arr[index][0]].cells[arr[index][1]].style.background= "pink";
       if (index > 0) {
           prevIndex= index - 1;
       }
       else {
           prevIndex= arr.length - 1;
       }
      gameTable.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border= "1px solid #ffdd99";
      gameTable.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.background= "#fff9ed";
       index++;
       quick++;

       if (index >= arr.length) {
           index =0;
          cycle++;
       }

       //跑马灯变速
       if (flag == false) {
          //走五格开始加速
           if (quick== 5) {
              clearInterval(Time);
              Speed = 50;
              Time = setInterval(Star,Speed);
           }
          //跑N圈减速
           if (cycle== EndCycle + 1 && index ==EndIndex) {
              clearInterval(Time);
              Speed = 300;
              flag = true;       //触发结束
              Time = setInterval(Star,Speed);
           }
       }
       if (flag == true&& index == $.cookie("stopNum") -1) {
           quick =0;
          clearInterval(Time);
          $("#gameContent p").removeClass("waitGame");
          $("#gameBtn").show(); //停止后显示开始按钮
       }
    }
})

参考来源：http://www.cnblogs.com/caism/archive/2011/10/12/2208738.html