JavaScript計時事件通過使用JavaScript中的BOM對象中的window對象的兩個方法就是setTimeout()方法和claerTimeout()方法，我們有能力作到在一個設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。我們稱之為計時事件。
在JavaScritp中使用計時事件是很容易的，兩個關鍵方法是:
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>
~~~
點擊開始計時按鈕的結果：
實例四： ?帶有停止按鈕的無窮循環中的計時事件
~~~
<!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在數字前面家一個0
minute=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 onload="startTime()">
<div id="test"></div>
</body>
</html>
~~~
運行的結果為：
- 前言
- HTML學習1：Dreamweaver8的安裝
- HTML學習2：初識HTML
- HTML學習3：常用標簽之文本標簽
- HTML學習4：常用標簽之列表標簽
- HTML學習5：常用標簽之圖像標簽
- HTML學習6：常用標簽之超鏈接標簽
- HTML學習7：常用標簽之表格標簽
- HTML學習8：常用標簽之框架標簽
- HTML學習9：常用標簽之表單標簽
- HTML學習10：表單格式化
- HTML學習11：HTTP 方法
- HTML學習12：其他常見標簽之頭標簽
- HTML學習13：其他常見標簽之體標簽
- 輕松學習JavaScript一：為什么學習JavaScript
- 輕松學習JavaScript二：JavaScript語言的基本語法要求
- 輕松學習JavaScript三：JavaScript與HTML的結合
- 輕松學習JavaScript四：JS點擊燈泡來點亮或熄滅這盞燈的網頁特效映射出JS在HTML中作用
- 輕松學習JavaScript五：JavaScript的變量和數據類型
- 輕松學習JavaScript六：JavaScript的表達式與運算符
- 輕松學習JavaScript七：JavaScript的流程控制語句
- 輕松學習JavaScript八：JavaScript函數
- 輕松學習JavaScript九：JavaScript對象和數組
- 輕松學習JavaScript十：JavaScript的Date對象制作一個簡易鐘表
- 輕松學習JavaScript十一：JavaScript基本類型(包含類型轉換)和引用類型
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(一)
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(二)
- 輕松學習JavaScript十三：JavaScript基于面向對象之繼承(包含面向對象繼承機制)
- 輕松學習JavaScript十四：JavaScript的RegExp對象(正則表達式)
- 輕松學習JavaScript十五：JavaScript之BOM簡介
- 輕松學習JavaScript十六：JavaScript的BOM學習(一)
- 輕松學習JavaScript十七：JavaScript的BOM學習(二)
- 輕松學習JavaScript二十九：JavaScript中的this詳解
- CSS基礎學習一：CSS概述
- CSS基礎學習二：如何創建 CSS
- CSS基礎學習三：CSS語法
- CSS基礎學習四：元素選擇器
- CSS基礎學習五：類選擇器
- CSS基礎學習六：id選擇器
- CSS基礎學習七：屬性選擇器
- CSS基礎學習八：派生選擇器
- CSS基礎學習九：偽類
- CSS基礎學習十：偽元素
- CSS基礎學習十一：選擇器的優先級
- CSS基礎學習十二：CSS樣式
- CSS基礎學習十三：盒子模型
- CSS基礎學習十四：盒子模型補充之display屬性設置
- CSS基礎學習十五：盒子模型補充之外邊距合并
- CSS基礎學習十六：CSS盒子模型補充之border-radius屬性
- CSS基礎學習十七：CSS布局之定位
- CSS基礎學習十八：CSS布局之浮動
- CSS基礎學習十九：CSS布局之圖文混排，圖像簽名，多圖拼接和圖片特效
- DIV+CSS實操一：經管系網頁總體模塊布局
- DIV+CSS實操二：經管系網頁添加導航欄和友情鏈接欄
- DIV+CSS實操三：經管系網頁內容模塊添加標題欄和版權信息模塊
- DIV+CSS實操四：經管系網頁內容模塊內容添加(一)
- DIV+CSS實操五：經管系網頁內容模塊內容添加(二)
- DIV+CSS實操六：經管系網頁添加導航欄下拉菜單
- DIV+CSS實操七：中文系內容模塊控制文本不換行和超出指定寬度后用省略號代替
- JS中實現字符串和數組的相互轉化