計時器setInterval()
在執行時,從載入頁面後每隔指定的時間執行代碼。
語法:
setInterval(代碼,交互時間);
參數說明：
1. 代碼：要調用的函數或要執行的代碼串。
2. 交互時間：週期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個能夠傳遞給 clearInterval() 從而取消對"代碼"的週期性執行的值。
調用函數格式(假設有一個clock()函數):
setInterval("clock()",1000)
或
setInterval(clock,1000)
咱們設置一個計時器，每隔100毫秒調用clock()函數，並將時間顯示出來，代碼以下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>
取消計時器clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的交互時間。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒調用clock函數，並將返回值賦值給i
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>
計時器setTimeout()
setTimeout()計時器，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。
語法:
setTimeout(代碼,延遲時間);
參數說明：
1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以毫秒爲單位（1s=1000ms)。
當咱們打開網頁3秒後，在彈出一個提示框，代碼以下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>
當按鈕start被點擊時，setTimeout()調用函數，在5秒後彈出一個提示框。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>
要建立一個運行於無窮循環中的計數器，咱們須要編寫一個函數來調用其自身。在下面的代碼，當按鈕被點擊後，輸入域便從0開始計數。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>
若是setTimeout（）在方法裏面遞歸，要中止就得clearTimeout（）；
取消計時器clearTimeout()
setTimeout()和clearTimeout()一塊兒使用，中止計時器。
語法:
clearTimeout(id_of_setTimeout)
參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。
下面的例子和上節的無窮循環的例子類似。惟一不一樣是，如今咱們添加了一個 "Stop" 按鈕來中止這個計數器：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>
