js抽奖程序(跑马灯效果)
作者:奋斗的小鸟 | 来源:互联网 | 2023-05-18 03:04
显示效果图:<divid"gameContent"><tableid"gameTable"><t
显示效果图:
1 | 2 | 3 | 4 | 5 |
16 | | | | 6 |
15 | | | | 7 |
14 | | | | 8 |
13 | 12 | 11 | 10 | 9 |
#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 arr.push([]);
for (var j = 0; j arr[i][j]= i * n + j;
}
}
//获取数组最外圈
var resultArr =[];
var tempX = 0,
tempY = 0,
direction = "Along",
count = 0;
while (tempX>= 0 && tempX= 0 && tempY 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