天蚕土豆,小说排行榜完结版,古风君子以泽

js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)游戲?qū)嵗?/h1>

2019-11-20 12:10:06

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)游戲。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>js抽獎(jiǎng)</title> <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>請(qǐng)輸入1-16其中一位整數(shù)，代表要停止的位置<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, "");   }  /*   * 定義數(shù)組   */  function GetSide(m,n){   //初始化數(shù)組   var arr = [];   for(var i=0;i<m;i++){    arr.push([]);    for(var j=0;j<n;j++){     arr[i][j]=i*n+j;    }   }   //獲取數(shù)組最外圈   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,   //當(dāng)前亮區(qū)位置  prevIndex=0,   //前一位置  Speed=300,   //初始速度  Time,   //定義對(duì)象  arr = GetSide(5,5),   //初始化數(shù)組   EndIndex=0,   //決定在哪一格變慢   tb = document.getElementById("tb"),  //獲取tb對(duì)象    cycle=0,   //轉(zhuǎn)動(dòng)圈數(shù)    EndCycle=0,   //計(jì)算圈數(shù)  flag=false,   //結(jié)束轉(zhuǎn)動(dòng)標(biāo)志   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(num){   //跑馬燈變速   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;   //觸發(fā)結(jié)束     Time=setInterval(Star,Speed);    }   }   if(index>=arr.length){    index=0;    cycle++;   }   //結(jié)束轉(zhuǎn)動(dòng)并選中號(hào)碼   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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

上一篇：js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕實(shí)例

下一篇：jQuery里filter()函數(shù)與find()函數(shù)用法分析