js中clearInterval無效，以及setInterval中斷後重新執行
阿新 • • 發佈：2019-01-02
4、document.getElementById("run").style.visibility="hidden";//run不可見
5、clearInterval()方法。
完整的程式碼如下所示：
5、clearInterval()方法。
完整的程式碼如下所示：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>HUAWEI-V8</title> <link rel="stylesheet" href="css/V8.css" type="text/css" /> </head> <body> <div id="show"> <span class="run showbody" id="run" onMouseOver="mouseOver()" onMouseOut="mouseOut()"></span> <span class="end showbody" id="end"></span> <span class="wait showbody" id="wait"></span> </div> <script> var runDiv = document.getElementById("run"); var waitD= document.getElementById("wait"); var waitFlag = 0; //按照指定的週期（以毫秒計）來呼叫函式或計算表示式。 var intW=self.setInterval("waiting()",400); var intR=self.setInterval("runing()",400);//每400毫秒呼叫一次runing()函式，實現run位置的右移 var intR1=0;//mouseOut()處呼叫setInterval的返回Id var mouseOutFlag=0;//是否呼叫mouseOut()標誌 //向右移動 function runing(){ var r = 80;//向右移動的偏移量--即每次右移80px //1 向右運動 runDiv.style.left = runDiv.offsetLeft+r+"px";//run的左邊距設定為run的寬度+80px，即每次右移80px //2 圖片切換 var left = parseInt(runDiv.style.left);//將返回的畫素字串轉換為數字，如60px -> 60 runChange(left,r);//run圖片切換 //4 停止運動，end可見 runStop(left); } //run背景圖片切換 function runChange(left,r){ if((left/r)%3==0){ runDiv.style.backgroundPositionY='0px'; }else if((left/r)%3==1){ runDiv.style.backgroundPositionY='-40px'; }else if((left/r)%3==2){ runDiv.style.backgroundPositionY='-80px'; } } //停止運動 function runStop(left){ var showWidth = parseInt(document.getElementById("show").offsetWidth);//獲取show的寬度 var runWidth = parseInt(runDiv.offsetWidth);//獲取run的寬度 if(left==(showWidth-runWidth) || left>(showWidth-runWidth)){//運動到靠近end時：run的左外邊距，小於等於。。。 if(mouseOutFlag==1){//呼叫了mouseOut()函式，則停止 window.clearInterval(intR1); } window.clearInterval(intR);//從mouseOut()處停止呼叫runing函式 window.clearInterval(intW);//停止呼叫waiting函式 runDiv.style.visibility="hidden";//run不可見 waitD.style.visibility="hidden";//wait也不可見 document.getElementById("end").style.visibility="visible";//end可見 } } //wait背景圖片切換 function waiting(){ if(waitFlag%4==0){ waitD.style.backgroundPositionY='0px'; }else if(waitFlag%4==1){ waitD.style.backgroundPositionY='-56px'; }else if(waitFlag%4==2){ waitD.style.backgroundPositionY='-112px'; }else if(waitFlag%4==3){ waitD.style.backgroundPositionY='-168px'; } waitFlag++; } //滑鼠移入時，更換背景圖片圖片，停止運動 function mouseOver(){ //如果不是第一次，則停止上一次的setInterval if(mouseOutFlag!=0){ window.clearInterval(intR1); } runDiv.style.backgroundImage="url(./img/hover.png)";//設定背景圖片 runDiv.style.backgroundPositionY='0px';//設定圖片在Y軸上的位置 runDiv.style.backgroundPosition='center center';//設定圖片位置為上下居中，左右居中 window.clearInterval(intR); } //滑鼠移出時，繼續向右移動，圖片繼續切換 function mouseOut(){ mouseOutFlag=1; //run從停止的地方繼續運動，且圖片從停止的地方繼續切換 runDiv.style.backgroundImage="url(./img/run.png)";//設定設定背景圖片 runDiv.style.backgroundPositionY='0px';//設定圖片在Y軸上的位置 //從停止的地方繼續向右移動 intR1=self.setInterval("runing()",400); } </script> </body> </html>