|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>js抽獎</title> <style type="text/css"> *{ margin: 0; padding: 0; font-size:12px;} body{ background-color: #2C1914;font-family:"宋體"; } a img, ul, li { list-style: none; } a{text-decoration:none; outline:none; font-size:12px;} input, textarea, select, button { font-size: 100%;} .abs{ position:absolute;} .rel{ position:relative;} .wrap{ min-height:1000px;} .main{ height:718px; } .con980{ width:980px; margin:0 auto;} .header{ width:100%; height:50px;} .play{ background:url() no-repeat; width:980px; height:625px; padding:22px 0 0 21px;} td{width:187px; height:115px; font-family:"微軟雅黑"; background-color:#666; text-align:center; line-height:115px; font-size:80px; } .playcurr{ background-color:#F60;} .playnormal{ background-color:#666;} .play_btn{ width:480px; height:115px; display:block; background-color:#F60;border:0; cursor:pointer; font-family:"微軟雅黑"; font-size:40px;} .play_btn:hover{ background-position:0 -115px;} .btn_arr{ left:255px; top:255px;} </style> </head> <body> <div class="wrap"> <div class="header"></div> <div class="main"> <div class="con980"> <div class="play rel"> <p class="btn_arr abs"><input value="點擊領獎" id="btn1" type="button" onclick="StartGame()" class="play_btn" ></p> <table class="playtab" id="tb" cellpadding="0" cellspacing="1"> <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> </div> </div> </div> </div> <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; //加速 btn = document.getElementById("btn1") function StartGame(){ clearInterval(Time); cycle=0; flag=false; EndIndex=Math.floor(Math.random()*16); //EndCycle=Math.floor(Math.random()*4); EndCycle=1; Time = setInterval(Star,Speed); } function Star(num){ //跑馬燈變速 if(flag==false){ //走五格開始加速 if(quick==5){ clearInterval(Time); Speed=50; Time=setInterval(Star,Speed); } //跑N圈減速 if(cycle==EndCycle+1 && index==parseInt(EndIndex)){ clearInterval(Time); Speed=300; flag=true; //觸發結束 Time=setInterval(Star,Speed); } } if(index>=arr.length){ index=0; cycle++; } //結束轉動并選中號碼 //trim里改成數字就可以減速，變成Endindex的話就沒有減速效果了 if(flag==true && index==parseInt(Trim('5'))-1){ quick=0; clearInterval(Time); } tb.rows[arr[index][0]].cells[arr[index][1]].className="playcurr"; if(index>0) prevIndex=index-1; else{ prevIndex=arr.length-1; } tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className="playnormal"; index++; quick++; } </script> </body> </html>
|
|
|
來自： 四兩哥 > 《Javascript》
