<!DOCTYPE html><html><head> ???<title>js抽奖</title> ???<meta charset="utf-8"> ???<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no"> ???<style type="text/css"> ???????td { ???????????width: 50px; ???????????height: 50px; ???????????border: 3px solid #ccc; ???????????text-align: center; ???????????vertical-align: middle ???????} ???</style></head><body><table id="tb"> ???<tr> ???????<td>1</td> ???????<td>2</td> ???????<td>3</td> ???????<td>4</td> ???????<td>5</td> ???</tr> ???<tr> ???????<td>16</td> ???????<td></td> ???????<td></td> ???????<td></td> ???????<td>6</td> ???</tr> ???<tr> ???????<td>15</td> ???????<td></td> ???????<td></td> ???????<td></td> ???????<td>7</td> ???</tr> ???<tr> ???????<td>14</td> ???????<td></td> ???????<td></td> ???????<td></td> ???????<td>8</td> ???</tr> ???<tr> ???????<td>13</td> ???????<td>12</td> ???????<td>11</td> ???????<td>10</td> ???????<td>9</td> ???</tr></table><p></p>请输入1-16其中一位整数，代表要停止的位置<input id="txtnum" value="12" type="text"/><input type="button" value="开始" onclick="StartGame()"/><script type="text/javascript"> ???/* ???* 删除左右两端的空格 ???*/ ???function Trim(str) { ???????return str.replace(/(^\s*)|(\s*$)/g, ""); ???} ???/* ????* 定义数组 ????*/ ???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(5, 5), ??//初始化数组 ???????EndIndex = 0, ??//决定在哪一格变慢 ???????tb = document.getElementById("tb"), ?//获取tb对象 ???????cycle = 0, ??//转动圈数 ???????EndCycle = 0, ??//计算圈数 ???????flag = false, ??//结束转动标志 ???????quick = 0; ??//加速 ???function StartGame() { ???????cycle = 0; ???????flag = false; ???????EndIndex = Math.floor(Math.random() * 16); ???????//EndCycle=Math.floor(Math.random()*4); ???????EndCycle = 1; ???????Time = setInterval(Star, Speed); ???} ???function Star() { ???????//跑马灯变速 ???????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 (index >= arr.length) { ???????????index = 0; ???????????cycle++; ???????} ???????//结束转动并选中号码 ???????if (flag == true && index == parseInt(Trim(document.getElementById("txtnum").value)) - 1) { ???????????quick = 0; ???????????clearInterval(Time); ???????} ???????tb.rows[arr[index][0]].cells[arr[index][1]].style.border = "3px solid red"; ???????if (index > 0) ???????????prevIndex = index - 1; ???????else { ???????????prevIndex = arr.length - 1; ???????} ???????tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border = "3px solid #ccc"; ???????index++; ???????quick++; ???} ???/* ???window.onload=function(){ ????Time = setInterval(Star,Speed); ???} ???*/</script></body></html>js实现游戏转盘抽奖
原文地址：http://www.cnblogs.com/theWayToAce/p/7601373.html