javascript
轻松学习JavaScript十七：JavaScript的BOM学习(二)
? ? ? ?通過使用JavaScript中的BOM對(duì)象中的window對(duì)象的兩個(gè)方法就是setTimeout()方法和claerTimeout()方法，我們
有能力作到在一個(gè)設(shè)定的時(shí)間間隔之后來運(yùn)行代碼。而不是在函數(shù)被調(diào)用后馬上運(yùn)行。我們稱之為計(jì)時(shí)事件。
? ? ? ?在JavaScritp中使用計(jì)時(shí)事件是非常easy的。兩個(gè)關(guān)鍵方法是:
? ? ? ?setTimeout()//未來的某時(shí)運(yùn)行代碼。
? ? ? ?clearTimeout()//取消setTimeout()。
? ? ? ?(1)setTimeout()方法? ? ? ?語法
var time=setTimeout("javascript語句",毫秒);
? ? ? ?setTimeout()方法會(huì)返回某個(gè)值。在上面的語句中。值被儲(chǔ)存在名為time的變量中。
setTimeout()的第一個(gè)參數(shù)是
含有JavaScrip 語句的字符串。
這個(gè)語句可能諸如 "alert('5 seconds!')"。或者對(duì)函數(shù)的調(diào)用，諸如 alertMsg()"。第二
個(gè)參數(shù)指示從當(dāng)前起多少毫秒后運(yùn)行第一個(gè)參數(shù)(提示：1000 毫秒等于一秒)。
? ? ? ?(2)clearTimeout()方法
? ? ? ?語法
clearTimeout(setTimeout_variable);
? ? ? ?假如你希望取消上面的setTimeout()。你能夠使用這個(gè)time變量名來指定它。也就是能夠這樣寫：
clearTimeout(time);
? ? ? ?那么以下我們就來說幾個(gè)實(shí)例：
? ? ? ?實(shí)例一：簡單的計(jì)時(shí)<!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計(jì)時(shí)事件</title> <script type="text/javascript"> function timeCount() {var time=setTimeout("alert('5秒到了。！！
')",5000); } </script> </head> <body> <form> <input type="button" value="開始計(jì)時(shí)" onClick = "timeCount()" /> </form> <p>請(qǐng)點(diǎn)擊上面的按鈕。
警告框會(huì)在開始后5秒后顯示出來。
</p> </body> </html>
? ? ? ? 執(zhí)行的結(jié)果為：
? ? ? ? 實(shí)例二：還有一個(gè)簡單的計(jì)時(shí)
<!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計(jì)時(shí)事件</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="顯示計(jì)時(shí)的文本" onClick="timeCount()" /> <input type="text" id="txt" /> </form> <p>點(diǎn)擊上面的按鈕。輸入框會(huì)顯示出已經(jīng)逝去的時(shí)間(2,4,6秒)。</p> </body> </html>? ? ? ? 執(zhí)行的結(jié)果為：
? ? ? ? 實(shí)例三：一個(gè)無窮循環(huán)的計(jì)時(shí)事件
<!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計(jì)時(shí)事件</title> <script type="text/javascript"> var time;//計(jì)時(shí)事件變量 var c=0;//文本框顯示的數(shù)據(jù) function timeCount() {document.getElementById('test').value=c;c=c+1;time=setTimeout("timeCount()",1000); } </script> </head><body> <form> <input type="button" value="開始計(jì)時(shí)" onClick = "timeCount()" /> <input type="text" id="test" /> </form> <p>請(qǐng)點(diǎn)擊上面的按鈕。輸入框會(huì)從0開始一直進(jìn)行計(jì)時(shí)。</p> </body> </html> ? ? ? ? 點(diǎn)擊開始計(jì)時(shí)button的結(jié)果：
? ? ? ?實(shí)例四： ?帶有停止button的無窮循環(huán)中的計(jì)時(shí)事件
<!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計(jì)時(shí)事件</title> <script type="text/javascript"> var time;//計(jì)時(shí)事件變量 var c=0;//文本框顯示的數(shù)據(jù) 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="開始計(jì)時(shí)" onClick = "timeCount()" /> <input type="text" id="test" /> <input type="button" value="停止計(jì)時(shí)" onClick="stopCount()" /> </form> <p>請(qǐng)點(diǎn)擊上面的“開始計(jì)時(shí)”按鈕來啟動(dòng)計(jì)時(shí)器。輸入框會(huì)一直進(jìn)行計(jì)時(shí)，從0開始。
<br/> 點(diǎn)擊“停止計(jì)時(shí)”按鈕能夠終止計(jì)時(shí)，并將計(jì)數(shù)重置為0。</p> </body> </html>
? ? ? ? 點(diǎn)擊開始計(jì)時(shí)的結(jié)果：
? ? ? ? 點(diǎn)擊停止計(jì)時(shí)的結(jié)果：?
? ? ? ? 這個(gè)實(shí)例事實(shí)上在前面的博文中已經(jīng)使用過：
<!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計(jì)時(shí)事件</title> <script type="text/javascript"> function startTime() {var today=new Date();var hour=today.getHours();var minute=today.getMinutes();var second=today.getSeconds();//小于10在數(shù)字前面家一個(gè)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>
? ? ? ? ?執(zhí)行的結(jié)果為：
總結(jié)
以上是生活随笔為你收集整理的轻松学习JavaScript十七：JavaScript的BOM学习(二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Codeforces Round #42
- 下一篇： MySQL: Connection Re