1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>js抽獎</title> 6 <style type="text/css"> 7 td{width:50px;height:50px;border:3px solid #ccc;text-align:center;vertical-align:middle} 8 </style> 9 </head> 10 <body> 11 <table id="tb"> 12 <tr> 13 <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 14 </tr> 15 <tr> 16 <td>16</td><td></td><td></td><td></td><td>6</td> 17 </tr> 18 <tr> 19 <td>15</td><td></td><td></td><td></td><td>7</td> 20 </tr> 21 <tr> 22 <td>14</td><td></td><td></td><td></td><td>8</td> 23 </tr> 24 <tr> 25 <td>13</td><td>12</td><td>11</td><td>10</td><td>9</td> 26 </tr> 27 </table> 28 <p></p> 29 請輸入1-16其中一位整數，代表要停止的位置<input id="txtnum" value="12" type="text" /><input type="button" value="開始" onclick="StartGame()" /> 30 <script type="text/javascript"> 31 /* 32 * 刪除左右兩端的空格 33 */ 34 function Trim(str){ 35 return str.replace(/(^\s*)|(\s*$)/g, ""); 36 } 37 /* 38 * 定義數組 39 */ 40 function GetSide(m,n){ 41 //初始化數組 42 var arr = []; 43 for(var i=0;i<m;i++){ 44 arr.push([]); 45 for(var j=0;j<n;j++){ 46 arr[i][j]=i*n+j; 47 } 48 } 49 //獲取數組最外圈 50 var resultArr=[]; 51 var tempX=0, 52 tempY=0, 53 direction="Along", 54 count=0; 55 while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n) 56 { 57 count++; 58 resultArr.push([tempY,tempX]); 59 if(direction=="Along"){ 60 if(tempX==n-1) 61 tempY++; 62 else 63 tempX++; 64 if(tempX==n-1&&tempY==m-1) 65 direction="Inverse" 66 } 67 else{ 68 if(tempX==0) 69 tempY--; 70 else 71 tempX--; 72 if(tempX==0&&tempY==0) 73 break; 74 } 75 } 76 return resultArr; 77 } 78 var index=0, //當前亮區位置 79 prevIndex=0, //前一位置 80 Speed=300, //初始速度 通過定時器的時間設置的 81 Time, //定義對象 82 arr = GetSide(5,5), //初始化數組 83 EndIndex=0, //決定在哪一格變慢 84 tb = document.getElementById("tb"), //獲取tb對象 85 cycle=0, //轉動圈數 86 EndCycle=0, //計算圈數 87 flag=false, //結束轉動標志 88 quick=0; //加速 89 function StartGame(){ 90 cycle=0; 91 flag=false; 92 EndIndex=Math.floor(Math.random()*16); 93 //EndCycle=Math.floor(Math.random()*4); 94 EndCycle=1; 95 Time = setInterval(Star,Speed); 96 } 97 function Star(num){ 98 //跑馬燈變速 99 if(flag==false){ 100 //走五格開始加速 101 if(quick==5){ 102 clearInterval(Time); 103 Speed=50; 104 Time=setInterval(Star,Speed); 105 } 106 //跑N圈減速 107 if(cycle==EndCycle+1 && index==EndIndex){ 108 clearInterval(Time); 109 Speed=300; 110 flag=true; //觸發結束 111 Time=setInterval(Star,Speed); 112 } 113 } 114 if(index>=arr.length){ 115 index=0; 116 cycle++; 117 } 118 //結束轉動並選中號碼 119 if(flag==true && index==parseInt(Trim(document.getElementById("txtnum").value))-1){ 120 quick=0; 121 clearInterval(Time); 122 } 123 tb.rows[arr[index][0]].cells[arr[index][1]].style.border="3px solid red"; 124 if(index>0) 125 prevIndex=index-1; 126 else{ 127 prevIndex=arr.length-1; 128 } 129 tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border="3px solid #ccc"; 130 index++; 131 quick++; 132 } 133 /* 134 window.onload=function(){ 135 Time = setInterval(Star,Speed); 136 } 137 */ 138 </script> 139 </body> 140 </html>