當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

轻松学习JavaScript十七：JavaScript的BOM学习(二)

發布時間：2025/3/20 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了轻松学习JavaScript十七：JavaScript的BOM学习(二) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? ? ? JavaScript計時事件

? ? ? ?通過使用JavaScript中的BOM對象中的window對象的兩個方法就是setTimeout()方法和claerTimeout()方法，我們

有能力作到在一個設定的時間間隔之后來運行代碼。而不是在函數被調用后馬上運行。我們稱之為計時事件。

? ? ? ?在JavaScritp中使用計時事件是非常easy的。兩個關鍵方法是:

? ? ? ?setTimeout()//未來的某時運行代碼。

? ? ? ?clearTimeout()//取消setTimeout()。

? ? ? ?(1)setTimeout()方法

? ? ? ?語法

var time=setTimeout("javascript語句",毫秒);

? ? ? ?setTimeout()方法會返回某個值。在上面的語句中。值被儲存在名為time的變量中。

setTimeout()的第一個參數是

含有JavaScrip 語句的字符串。

這個語句可能諸如 "alert('5 seconds!')"。或者對函數的調用，諸如 alertMsg()"。第二

個參數指示從當前起多少毫秒后運行第一個參數(提示：1000 毫秒等于一秒)。

? ? ? ?(2)clearTimeout()方法

? ? ? ?語法

clearTimeout(setTimeout_variable);

? ? ? ?假如你希望取消上面的setTimeout()。你能夠使用這個time變量名來指定它。也就是能夠這樣寫：

clearTimeout(time);

? ? ? ?那么以下我們就來說幾個實例：

? ? ? ?實例一：簡單的計時
<!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>JS計時事件</title> <script type="text/javascript"> function timeCount() {var time=setTimeout("alert('5秒到了。！！

')",5000); } </script> </head> <body> <form> <input type="button" value="開始計時" onClick = "timeCount()" /> </form> <p>請點擊上面的按鈕。

警告框會在開始后5秒后顯示出來。

</p> </body> </html>

? ? ? ? 執行的結果為：

? ? ? ? 實例二：還有一個簡單的計時

<!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>JS計時事件</title> <script type="text/javascript"> function timeCount() { var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000) var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000) var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000) } </script> </head><body> <form> <input type="button" value="顯示計時的文本" onClick="timeCount()" /> <input type="text" id="txt" /> </form> <p>點擊上面的按鈕。輸入框會顯示出已經逝去的時間(2,4,6秒)。</p> </body> </html>

? ? ? ? 執行的結果為：

? ? ? ? 實例三：一個無窮循環的計時事件

<!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>JS計時事件</title> <script type="text/javascript"> var time;//計時事件變量 var c=0;//文本框顯示的數據 function timeCount() {document.getElementById('test').value=c;c=c+1;time=setTimeout("timeCount()",1000); } </script> </head><body> <form> <input type="button" value="開始計時" onClick = "timeCount()" /> <input type="text" id="test" /> </form> <p>請點擊上面的按鈕。輸入框會從0開始一直進行計時。</p> </body> </html> ? ? ? ? 點擊開始計時button的結果：

? ? ? ?實例四： ?帶有停止button的無窮循環中的計時事件

<!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>JS計時事件</title> <script type="text/javascript"> var time;//計時事件變量 var c=0;//文本框顯示的數據 function timeCount() {document.getElementById('test').value=c;c=c+1;time=setTimeout("timeCount()",1000); } function stopCount() {c=0;setTimeout("document.getElementById('test').value=0",0);clearTimeout(time); } </script> </head><body> <form> <input type="button" value="開始計時" onClick = "timeCount()" /> <input type="text" id="test" /> <input type="button" value="停止計時" onClick="stopCount()" /> </form> <p>請點擊上面的“開始計時”按鈕來啟動計時器。輸入框會一直進行計時，從0開始。

<br/> 點擊“停止計時”按鈕能夠終止計時，并將計數重置為0。</p> </body> </html>

? ? ? ? 點擊開始計時的結果：

? ? ? ? 點擊停止計時的結果：?

? ? ? ? 實例五：使用計時事件制作的鐘表
? ? ? ? 這個實例事實上在前面的博文中已經使用過：
<!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>JS計時事件</title> <script type="text/javascript"> function startTime() {var today=new Date();var hour=today.getHours();var minute=today.getMinutes();var second=today.getSeconds();//小于10在數字前面家一個0minute=checkTime(minute);second=checkTime(second);document.getElementById("test").innerHTML=hour+":"+minute+":"+second;var time=setTimeout("startTime()",500); } function checkTime(i) {if (i<10) {return i="0" + i;}else{return i;} } </script> </head><body οnlοad="startTime()"> <div id="test"></div> </body> </html>

? ? ? ? ?執行的結果為：

總結

以上是生活随笔為你收集整理的轻松学习JavaScript十七：JavaScript的BOM学习(二)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Codeforces Round #42
下一篇： MySQL: Connection Re