5_1.BOM--定时器

定时器

指程序可以在设定的时间间隔后，在执行，而不是立刻执行
JS中有两种定时器：
一次性定时器：程序等待一定的时间间隔后，自动执行，只执行一次
周期性定时器：程序每隔一段时间间隔，就自动反复执行

一次性定时器：
var timer=setTimeout（task，ms）
参数task：要执行的程序
参数ms：要等待的毫秒数
定时器启动时，会获得一个定时器序号，如果一个定时器需要被停止。则必须使用变量保存定时器的序号
停止一次性定时器：clearTime（timer）

小练习：右下角弹出窗口

<div id="d1"><span>X</span></div>

var d1=document.getElementById("d1");
setTimeout(show,1000);
function show(){
	d1.style.bottom="0px";
}
var X=d1.querySelector("span");
X.onclick=function(){
	d1.style.bottom="-200px";
	setTimeout(show,3000);
}

#d1{
	width: 300px;
	height: 200px;
	background: lightblue;
	position: fixed;
	right: 20px;
	bottom: -200px;
	transition: all 1s;
}
#d1 span{
	border: 1px solid #000;
	position: absolute;
	right: 0;
	top: 0;
	padding: 5px 10px;
}

周期性定时器：
var timer=setUnterval（task，ms）
参数task：要执行的程序
参数ms：要等待的毫秒数
定时器启动时，会获得一个定时器序号，如果一个定时器需要被停止。则必须使用变量保存定时器的序号
停止周期性定时器：clearInterval（timer）

小练习：实现倒计时页面

<h1 id="newyeartime">距离新年还有:<span>0</span>天<span>0</span>:<span>0</span>:<span>0</span></h1>
<button id="star/stop">停止计时</button>

//目标时间
var targetTime=new Date("2020/01/01");
//查找要修改的元素
var h1=document.getElementsByTagName("h1");
var span=document.getElementsByTagName("span");
var btn=document.getElementById("star/stop");
task();
//周期性定时器
var timer=setInterval(task,1000);
function task(){
	//当前时间
	var currentTime=new Date();
	var s=(targetTime-currentTime)/1000;//相差多少秒
	if(s>0){
		//计算
		var d=parseInt(s/(3600*24));//天
		span[0].innerHTML=d;
		var h=parseInt(/*不足一天的秒数:*/s%(3600*24)/3600);//小时
		span[1].innerHTML=h<10?"0"+h:h;
		var m=parseInt(s%3600/60);//分钟
		span[2].innerHTML=m<10?"0"+m:m;
		var s=parseInt(s%60);//秒
		span[3].innerHTML=s<10?"0"+s:s;
	}else{
		h1.innerHTML="已经开始了！！！";
		clearInterval(timer);
		timer=null;
	}
}

btn.onclick=function(){
	if(timer!=null){
		clearInterval(timer);
		timer=null;
		this.innerHTML="开始计时";
	}else{
		timer=setInterval(task,1000);
		this.innerHTML="停止计时";
	}
}

#newyeartime span{
	display: inline-block;
	background: #5555ff;
	width: 50px;
	color: white;
	text-align: center;
	margin: 0 6px;
	border-radius: 9px;
}