代码实现的效果是奖项不变,有一块高亮围绕着边框进行跑马灯式的展示,并且设置开始后几秒后速度进行变快,在中奖前的前几秒的位置开始缓慢,并暂停在后台返回要抽中的奖项上面;
<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都不需要;