代码: CSS:/*旋转木马*/#rotate_container li {width: 128px;box-shadow: 0 1px 3px rgba(0, 0, 0, .5);position:
顺晟科技
2021-08-19 11:34:28
214
代码实现的效果是奖项不变,有一块高亮围绕着边框进行跑马灯式的展示,并且设置开始后几秒后速度进行变快,在中奖前的前几秒的位置开始缓慢,并暂停在后台返回要抽中的奖项上面;
<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都不需要;
14
2022-09
13
2022-09
19
2021-08