定时器 短信验证demo

定时器分为延时定时器和间歇定时器。

1.延时定时器 setTimeout

setTimeout有两个参数，参数1是回调函数，参数2是延迟的时间（单位是毫秒）。工作一次，但需要清除，为下一次做准备。清除定时器，否则会一直工作。

<input type="button"  id="btn1" value="点击">
<input type="button" id="btn2" value="清除">

var btn1=document.getElementById("btn1");
	var btn2=document.getElementById("btn2");
	//b赋值为空
	var b=null;
	btn1.onclick=function(){
		//定时器赋给b
		b=setTimeout(function(){
			alert("hi");
		},3000);
	}
	btn2.onclick=function(){
		clearTimeout(b);//清除定时器
	}

2.间歇定时器 setInterval

setInterval有两个参数，参数1是回调函数，参数2是延迟的时间（单位是毫秒）。会一直工作，直到清除为止。

<input type="button"  id="btn1" value="点击">
<input type="button" id="btn2" value="清除">

var btn1=document.getElementById("btn1");
	var btn2=document.getElementById("btn2");
	//b赋值为空
	var b=null;
	btn1.onclick=function(){
		//定时器赋给b
		b=setInterval(function(){
			console.log("hi");
		},3000);
	}
	btn2.onclick=function(){
		clearTimeout(b);//清除定时器
	}

3.短信验证demo

<input type="text">
<input type="button" id="btn2" value="点击获取验证码">

        var  num=4;
	var btn2=document.getElementById("btn2");
	//b赋值为空
	var b=null;
	btn2.onclick=function(){
		this.disabled=true;
		//定时器赋给b
		b=setInterval(function(){
			//在定时器中,this指向window
			num--;
			btn2.value=num+"秒后再次发送";
			if(num==0){
				clearInterval(b);
				btn2.value="点击获取验证码";
				btn2.disabled=false;
				num=4;
			}
		},1000);
	}