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>