萬盛學電腦網 >> 腳本專題 >> 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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved