JS——定时器

一、定时器

    有两个定时器：setInterval()、setTimeout()。

    他们也有各自的取消函数: clearInterval()、clearTimeout()。

参数：

    setInterval();有两个参数，A和时间B（单位是ms），其中A是自动刷新的那个函数。setTimeout同此。

区别：

    setInterval每Bms会执行一次A，不断重复执行

    setTimeout只执行一次。

特点：

    setInterval（）有一个特点：第一次执行的时候是等待Bms才执行A部分。

二、获取电脑当前日期

    var oDate = new Date();

其中，

    小时：oDate.getHours();

    分钟：oDate.getMinutes();

    秒：oDate.getSeconds();

三、实例效果：

四、代码

HTML

<div class="img">
	<img src="img/0.png" alt="">
	<img src="img/0.png" alt="">: 
	<img src="img/0.png" alt="">
	<img src="img/0.png" alt="">: 
	<img src="img/0.png" alt="">
	<img src="img/0.png" alt="">
</div>

CSS

<style>
	*{
		margin: 0;
		padding: 0;
	}
	div {
		width: 394px;
		height: 59px;
		background-color: #ccc;
		font-weight: 700;
		font-size: 48px;
		margin: 50px auto;
		padding: 15px;
	}
</style>

JS

function ToDou(time){
	if(time < 10){
		return '0'+time;
	}else {
		return ''+time;
	}
}

window.onload = function(){
	function UpDate() {
		var oDate = new Date();
		var str = '' + ToDou(oDate.getHours()) + ToDou(oDate.getMinutes()) + ToDou(oDate.getSeconds());
		var oImg = document.getElementsByTagName('img');
		for(var i = 0;i < oImg.length;i++){
			oImg[i].src = "img/" + str.charAt(i) +".png";
		}
	}
	UpDate();
	setInterval(UpDate , 1000);
};