萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js定時器

js定時器

 這篇文章主要分享一段js代碼,有關js定時器的小例子,分為執行一次的定時器與重復執行的定時器,需要的朋友可以參考下

1,只執行一次的定時器     代碼如下: <script>  //定時器 異步運行  function hello(){  alert("hello");  }  //使用方法名字執行方法  var t1 = window.setTimeout(hello,1000);  var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法  window.clearTimeout(t1);//去掉定時器  </script>      2,重復執行的定時器  代碼如下: <script>  function hello(){  alert("hello");  }  //重復執行某個方法  var t1 = window.setInterval(hello,1000);  var t2 = window.setInterval("hello()",3000);  //去掉定時器的方法  window.clearInterval(t1);  </script>      備注:    如果在一個頁面中有兩個方法,都是在頁面加載完成之後執行的,實際卻未能按先後順序執行,可以參照如下方法解決:  可以在onload方法中添加一個定時器,設置一個定時器,“延遲”一段時間之後再運行,即可認為區分頁面加載運行方法的先後順序。     在javascritp中,有兩個關於定時器的專用函數,分別為:   1.倒計定時器:timename=setTimeout("function();",delaytime); 2.循環定時器:timename=setInterval("function();",delaytime);   第一個參數“function()”是定時器觸發時要執行的動作,可以是一個函數,也可以是幾個函數,函數間用“;”隔開即可。比如要彈出兩個警告窗口,便可將“function();”換成 “alert('第一個警告窗口!');alert('第二個警告窗口!');”;而第二個參數“delaytime”則是間隔的時間,以毫秒為單位,即填寫“5000”,就表示5秒鐘。   倒計時定時器是在指定時間到達後觸發事件,而循環定時器就是在間隔時間到來時反復觸發事件,兩者的區別在於:前者只是作用一次,而後者則不停地作用。 比如你打開一個頁面後,想間隔幾秒自動跳轉到另一個頁面,則你就需要采用倒計定時器“setTimeout("function();",delaytime)” ,而如果想將某一句話設置成一個一個字的出現, 則需要用到循環定時器“setInterval("function();",delaytime)” 。   獲取表單的焦點,則用到document.activeElement.id。利用if來判斷document.activeElement.id和表單的ID是否相同。 比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表單對應的ID。   定時器:   用以指定在一段特定的時間後執行某段程序。   JS中定時執行,setTimeout和setInterval的區別,以及l解除方法   setTimeout(Expression,DelayTime),在DelayTime過後,將執行一次Expression,setTimeout 運用在延遲一段時間,再進行某項操作。 setTimeout("function",time) 設置一個超時對象   setInterval(expression,delayTime),每個DelayTime,都將執行Expression.常常可用於刷新表達式. setInterval("function",time) 設置一個超時對象   SetInterval為自動重復,setTimeout不會重復。   clearTimeout(對象) 清除已設置的setTimeout對象 clearInterval(對象) 清除已設置的setInterval對象   略舉兩例。 例1.表單觸發或加載時,逐字輸出字符串   代碼如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="JavaScript" type="text/javascript"> var str = "這個是測試用的范例文字"; var seq = 0; var second=1000; //間隔時間1秒鐘 function scroll() { msg = str.substring(0, seq+1); document.getElementByIdx_x_x('word').innerHTML = msg; seq++; if (seq >= str.length) seq = 0; } </script> </head> <body onload="setInterval('scroll()',second)"> <div id="word"></div><br/><br/> </body> </html>       例2.當焦點在輸入框的時候,定時檢查輸入框信息,焦點不在時不執行檢查動作。    代碼如下: <!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="JavaScript" type="text/javascript"> var second=5000; //間隔時間5秒鐘 var c=0; function scroll() { c++; if ("b" == document.activeElement.id) { var str="定時檢查第<b> "+c+" </b>次<br/>"; if(document.getElementByIdx_x_x('b').value!=""){ str+="輸入框當前內容為當前內容為<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>"; } document.getElementByIdx_x_x('word').innerHTML = str; } } </script> </head> <body> <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/> <div id="word"></div><br/><br/> </body> </html>     例3.下面這個是最簡單的例子,定時器時間到達後彈出警告窗口。    代碼如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script language="javascript"> function count() { document.getElementByIdx_x_x('m').innerHTML="計時已經開始!"; setTimeout("alert('十秒鐘到!')",10000) } </script> <body> <div id="m"></div> <input TYPE="button" value=" 計時開始" onclick="count()"> </body> </html>     例4:倒計時定時跳轉    代碼如下: <html> <head>   <base href="<%=basePath%>">   <title>My JSP 'ds04.jsp' starting page</title>   <span id="tiao">3</span>   <a href="javascript:countDown"> </a>秒後自動跳轉……   <meta http-equiv=refresh content=3;url= '/ds02.jsp'/>   <!--腳本開始-->   <script language="javascript" type=""> function countDown(secs){  tiao.innerText=secs;  if(--secs>0)   setTimeout("countDown("+secs+")",1000);  }  countDown(3);  </script>   <!--腳本結束-->  </head>     例6:    代碼如下: <head>      <meta http-equiv="refresh" content="2;url='b.html'">  </head>      例7: 代碼如下: <script language="javascript" type="text/javascript">  setTimeout("window.location.href='b.html'", 2000);  //下面兩個都可以用  //setTimeout("javascript:location.href='b.html'", 2000);  //setTimeout("window.location='b.html'", 2000); </script>     例8:    代碼如下: <span id="totalSecond">2</span> <script language="javascript" type="text/javascript">  var second = document.getElementByIdx_x('totalSecond').innerHTML;  if(isNaN(second)){   //……不是數字的處理方法  }else{   setInterval(function(){    document.getElementByIdx_x('totalSecond').innerHTML = --second;    if (second <= 0) {     window.location = 'b.html';    }   }, 1000);  }  </script>
copyright © 萬盛學電腦網 all rights reserved