JavaScript初級——Window對象的定時器
setTimeout
- 作用：在指定的毫秒數調用函數或者計算表達式(只執行一次)
- 使用：setTimerout(
函數/計算表達式,等待時間)
- 返回值：setTimeout方法返回一個方法對象，可以定義一個變量來接收它
- 取消定時器：clearTimeout(
setTimeout返回的方法對象)
setInterval
- 作用：按照指定的週期(毫秒數)來調用函數或表達式
- 使用：setInterval(
函數/計算表達式,週期)
- 返回值：setInterval方法返回一個方法對象，可以定義一個變量來接收它
- 取消定時器：clearInterval(
setInterval返回的方法對象)
實例
<!--- 使用setInterval實現倒計時功能>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="t">10</h1>
<input type="button" οnclick="start()" value="開始">
<input type="button" οnclick="stop()" value="暫停">
<input type="button" οnclick="res()" value="重置">
<script>
var timer=null;//定義變量timer，用於接收方法返回值
var h=document.getElementById("t"); //獲取倒計時
function start() {
if(timer==null){ //避免多次點擊“開始”按鈕而產生的bug
timer=setInterval(function(){ //setInterval中的函數可以寫成匿名內部類的形式
var t=h.innerHTML;
if(t==0){
stop();
alert("午時已到！");
h.innerText=10;
}else{
t--
h.innerHTML=t;
}
},1000)
}
}
function res() { //重置倒計時
if(timer!=null){
clearInterval(timer); //取消定時器
}
h.innerHTML=10;
timer=null;
}
function stop() { //暫停計時器
if(timer!=null){
clearInterval(timer);
timer=null;
}
}
</script>
</body>
</html>
