jq+css实现跑马灯效果的轮盘抽奖
代码实现的效果是奖项不变,有一块高亮围绕着边框进行跑马灯式的展示,并且设置开始后几秒后速度进行变快,在中奖前的前几秒的位置开始缓慢,并暂停在后台返回要抽中的奖项上面;
<table id="tb" class="drawContent"> <tr> <td> <p>100元话费</p> <label>(剩余 50 份)</label> </td> <td> <p>200元话费</p> <label>(剩余 50 份)</label> </td> <td> <p>100元话费</p> <label>(剩余 50 份)</label> </td> </tr> <tr> <td> <p>10元话费</p> <label>(剩余 50 份)</label> </td> <td> <button onclick="StartGame()"> <img src="images/beginDraw.png" /> </button> </td> <td> <p>50元话费</p> <label>(剩余 50 份)</label> </td> </tr> <tr> <td> <p>10元话费</p> <label>(剩余 50 份)</label> </td> <td> <p>50元话费</p> <label>(剩余 50 份)</label> </td> <td> <p>100元话费</p> <label>(剩余 50 份)</label> </td> </tr> </table>
js如下:
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;
}
var index = 0, //当前亮区位置
prevIndex = 0, //前一位置
Speed = 300, //初始速度
Time, //定义对象
arr = GetSide(3, 3), //初始化数组
EndIndex = 0, //决定在哪一格变慢
tb = document.getElementById("tb"), //获取tb对象
cycle = 0, //转动圈数
EndCycle = 0, //计算圈数
flag = false, //结束转动标志
quick = 0; //加速
var endChecked = 0;
function StartGame() {
cycle = 0;
flag = false;
// EndIndex = ;//1-9
EndCycle = 1;
Time = setInterval(Star, Speed);
}
function Star(num) {
//跑马灯变速
if(flag == false) {
//走4格开始加速
if(quick == 4) {
clearInterval(Time);
Speed = 100;
Time = setInterval(Star, Speed);
}
// ajax 确定中奖项
endChecked = 1//0-7
EndIndex = Math.floor(Math.random()*8);
//跑N圈减速
console.log(cycle+'---'+EndCycle)
//最少跑两圈 不能停的太快 等不到后台返回值
if(cycle>2&& index == endChecked+1) {
clearInterval(Time);
Speed = 300;
flag = true; //触发结束
Time = setInterval(Star, Speed);
}
}
if(index >= arr.length) {
index = 0;
cycle++;
}
//结束转动并选中号码
if(flag == true && index == endChecked) {
quick = 0;
clearInterval(Time);
}
tb.rows[arr[index][0]].cells[arr[index][1]].className = "act";
if(index > 0)
prevIndex = index - 1;
else {
prevIndex = arr.length - 1;
}
tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className ="";
index++;
quick++;
}
这里不需要再引入别的js库,jq都不需要;

浙公网安备 33010602011771号