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(); //停止后显示开始按钮
}
}
})