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都不需要;

posted @ 2020-11-29 22:36  樱花雨纷飞  阅读(28)  评论(0编辑  收藏  举报