JavaScript 實現跑馬燈抽獎效果
阿新 • • 發佈:2019-02-12
實現效果如圖:
程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js跑馬燈抽獎效果</title> <style type="text/css"> *{ margin: 0; padding: 0; font-size:12px; } body{ background-color: #2C1914; font-family:"宋體"; } .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; color: #FFFFFF; } .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{ color:#fff; } .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="start()" 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"> /*思路:獲取座標--陣列arr 執行軌跡--獲取最外圈陣列 runArr 高亮顯示--根據runArr的下標來更換背景色和字型顏色 速度變化--改變定時器的執行頻率 setTimeIterver(function(),time) 停止點--獲取隨機數付給runArr,並清除定時器 加速減速 轉動圈數:計數器 */ /*定義二維陣列 為了易於維護修改,長寬設為引數m,n*/ function getSide(m,n){ var arr=[m];//先宣告m長度的一維 for(var i=0;i<m;i++){ arr[i]=[n];//宣告n長度的二維 for(var j=0;j<n;j++){ arr[i][j]=i*n+j; //給陣列元素賦值 } } //檢測二維陣列 // for(var i=0;i<arr.length;i++){ // document.write("第"+i+"行: "+arr[i]+"<br/>"); // } /*獲取運動軌跡 -- 最外圈的陣列*/ var runArr=[]; var tempX=0, //定義座標 tempY=0, direction="straight", count=0; while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n){//迴圈條件 tempX tempY在 n和m的長度範圍內 count++; runArr.push([tempY,tempX]); if(direction=="straight"){//亮塊直行的規律 if(tempX==n-1){ tempY++; } else{ tempX++; } if(tempX==n-1&&tempY==m-1){//亮塊處於拐點 direction="turn"; //改變條件 執行下面程式碼 } } else{ if(tempX==0){//亮塊直行的規律 tempY--; } else{ tempX--; } if(tempX==0 && tempY==0){ break; } } } return runArr; } var stopNum,//停止數 index=0,//當前亮區位置 prevIndex, //前一位置 speed=300,//初始速度 timer,//定時器物件 downIndex=0, //決定在哪一格變慢 cycle=0, //轉動圈數 EndCycle=0, //設定轉幾圈後再減速 flag=false, //結束轉動標誌 為true時停止 speedUp=0; //加速 tb = document.getElementById("tb"), //獲取tb物件 btn = document.getElementById("btn1"),//獲取按鈕物件 runArr=[]; runArr=getSide(5,5);//初始化陣列 /* for(var i=0;i<runArr.length;i++){ document.write(runArr[i]+"<br/>"); }*/ //定義啟動函式 function start(){ btn.disabled = true; stopNum = Math.floor(Math.random() * 16);//點選產生隨機數,最後將停在次數上 downIndex=Math.floor(Math.random() * 16); EndCycle=1; clearInterval(timer); cycle=0; flag=false;//結束轉動標誌 timer=setInterval(run,speed);//啟動定時器 } //執行函式 function run(){ change();//背景變化函式 //跑馬燈加速 if(flag==false){ if(speedUp==5){ //走5格後加速 clearInterval(timer); //先清除定時器,再改變速度 speed=50; timer=setInterval(run,speed); } } //跑N圈後減速 if(cycle==EndCycle+1 && index==downIndex){ clearInterval(timer); speed=300; flag=true; //觸發結束 timer=setInterval(run,speed);//減速 } //計算轉了幾圈 if(index>=runArr.length){ index=0; cycle++; } //停止並選中號碼 if(flag==true && index==stopNum){ speedUp=0; clearInterval(timer); btn.disabled = false; } } //單元格背景變亮 function change(){ tb.rows[runArr[index][0]].cells[runArr[index][1]].className="playcurr"; //給當前單元格新增樣式,換高亮的背景色; if(index>0){ prevIndex=index-1;//前一位置 } else{ prevIndex=runArr.length-1; } tb.rows[runArr[prevIndex][0]].cells[runArr[prevIndex][1]].className="playnormal";//游標走過後恢復背景色; index++; speedUp++; } </script> </body> </html>