JS——定时器

最新推荐文章于 2022-09-21 10:19:59 发布

舒眉

最新推荐文章于 2022-09-21 10:19:59 发布

阅读量230

点赞数

分类专栏：前端技术文章标签：定时器计时器实例

本文链接：https://blog.csdn.net/sunshine_0880/article/details/81052236

版权

前端技术专栏收录该内容

38 篇文章 5 订阅

订阅专栏

一、定时器

有两个定时器：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>

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);
};