倒计时，电子表和定时器（7）

1.倒计时

15分钟的倒计时

<h1>15:00</h1>
<script>
	var s=900;
	function fun1(){
		s--;
		var m=parseInt(s/60);
	//三目运算只用于赋值的时候
		var se=s%60<10 ? "0"+s%60 : s%60;
		// if (s%60<10) {
		// 	se="0"+s%60;
		// }else{
		// 	se=s%60;
		// }
		//console.log(se)
		document.getElementsByTagName("h1")[0].innerHTML=m+":"+se;
	}
	var t=setInterval(fun1,1000);
</script>

JavaScript的setInterval()函数用于设定每隔指定的时间就执行对应的函数或代码。该函数属于全局对象window。

 setInterval()函数的语法如下： setInterval ( code, milliseconds[, args...] )  

code 需要执行的函数或js代码       

 milliseconds 执行函数或代码的间隔时间，单位为毫秒 

args 可选参数用于给被调用的函数传递参数，参数可以有多个

距离固定日期的倒计时

日期对象：var D=new Date(2015,4,8)  Math对象：数学运算

<h1></h1>
<script>
	var D=new Date(2019,1,15,24,0,0);//定义一个规定好的事件对象，2019-2-23-6-0-0；
	var Ddate=D.getDate();
	var Dh=D.getHours();//够6 就减1
	var Dm=D.getMinutes();//到0时，就减1，然后加60；
	var Ds=D.getSeconds();//到0时，就加60；
	function changeTime(){
		var x=new Date();
		var Xdate=x.getDate();
		var Xh=x.getHours();
		var Xm=x.getMinutes();
		var Xs=x.getSeconds();
		var s=Ds-Xs;
		var m=Dm-Xm;
		var h=Dh-Xh;
		var date=D.date-Xdate;
		if (s<0) {
			m--;
			s+=60;
		}
		if (m<0) {
			h--;
			m+=60;
		}
		if (h<0) {
			date--;
			h+=24;
		}
		document.getElementsByTagName("h1")[0].innerHTML="还剩"+h+"小时"+m+"分"+s+"秒";
	}
	setInterval(changeTime,1000);
</script>

2.电子表

<h1></h1>
<script>
	//和当前时间有关系的，都是Date
	//倒计时，7月18日12时00分0秒
	function changeTime(){
		var D=new Date();
		var year=D.getFullYear();
		var month=D.getMonth()+1;
		var date=D.getDate();
		var h=D.getHours();
		var m=D.getMinutes();
		var s=D.getSeconds();
		//document.write(year+"-"+month+"-"+date+"-"+h+"-"+m+"-"+s);
		document.getElementsByTagName("h1")[0].innerHTML=year+"年"+month+"月"+date+"日"+h+"时"+m+"分"+s+"秒";
	}
		setInterval(changeTime,1000);
</script>

3.定时器

无限定时器：无间隔定时，作用每隔一段时间后，自动调用该函数；

var t=setInterval(函数，时间)   clearInterval(t)

<h1></h1>
<button id="bt1">停止定时器</button>
<button id="bt2">启动定时器</button>
<script>
//定时器： 1.无间隔定时（无限定时器），作用每间隔一段时间后，自动调用该函数
//注意：定时器，都需要赋值给变量的
	// function show(){
	// 	console.log("<h3>"+"你好"+"</h3>")
	// }
	// //var x=setInterval(show,3000);
	// var bt1=document.getElementById("bt1");
	// var bt2=document.getElementById("bt2");
	// bt1.onclick=function(){
	// 	clearInterval(x);
	// }
	// bt2.onclick=function(){
	// 	x=setInterval(show,2000);
	// }
		
//实现一个倒计时的功能，在页面上倒计时10秒钟，当时间走到0的时候，在页面上弹出一个hellow world
	var num=10;
        var t;// 此处声明为全局变量，如果不声明，默认的也是全局变量；
	function fun(){
		num--;
		document.getElementsByTagName("h1")[0].innerHTML=num;
		if (num<0) {
			alert("hello world");
			clearInterval(t);
		}
	}
	bt2.onclick=function(){
		t=setInterval(fun,1000);
	}
	bt1.onclick=function(){
		clearInterval(t);
	}
</script>

延时定时器：间隔多长时间之后调用一次函数（只调用一次）

var t=setTimeout(函数，时间)   clearTimeout(t)

<script>
    function(){
        console.log(1);
    }
    setTimeout(show,3000);
</script>

如果想用延时定时器实现无限次调用，必须在指定的函数内部重新启动一次延时定时器；

<button>清除</button>
<script>
    var t;// 此处声明为全局变量，如果不声明，默认的也是全局变量
    function(){
        console.log(1);
        t=setTimeout(show,1000);
    } 
    var t=setTimeout(show,1000) ;  
    document.getElementByTagName("button")[0].onclick=function(){    
        clearTimeout(t); //清除 停止
}
</script>

两种实现无限次调用的区别：

1. 如果函数的 执行时间 大于 无限定时器setInterval 的调用时间，会造成函数的累积； 

2. setTimeout()写在函数的最后，不会造成函数的累积；