JavaScript初级——Window对象的定时器

JavaScript初级——Window对象的定时器

  • setTimeout
  • setInterval

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>

上一篇:JavaScript之setinterval的具体使用


下一篇:javascript – 如何重置setInterval计时器?