JavaScript实现计数器、计时器——setTimeout与setInterval的区别

最新推荐文章于 2021-11-26 21:28:04 发布

追風者0x8ffd98a8

最新推荐文章于 2021-11-26 21:28:04 发布

阅读量472

点赞数

分类专栏：前端文章标签： javascript js

本文链接：https://blog.csdn.net/qq_44157349/article/details/111152200

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript实现计数器、计时器——setTimeout与setInterval的区别

JavaScript代码可以在界面上实现计数器获取计时器，计数器和计时器的本质是数字的累加，而显示当前的本质是获取具体时间后的字符串操作。
以上可以通过两种方式实现，一种是通过setTimeout调用函数，一种为setInterval调用函数。

		<!-- 使用setTimeout实现时钟 -->
		<script type="text/javascript">
			function getTime() {
				var date = new Date();
				var year = date.getFullYear();
				// var year = date.getYear() + 1900; 获取的是年数差
				var month = date.getMonth() + 1;
				var day = date.getDate();
				
				var hour = date.getHours();
				var min = date.getMinutes();
				var sec = date.getSeconds();
				
				var time = year  + "-" + month  + "-" + (day<10 ? "0"+day:day )  + " " + hour  + ":" + (min<10 ? "0"+min:min )  + ":" + sec;
				// console.log(year,month,day,hour,min,sec);	
				document.getElementById("time").innerText = time;
				var timeOut = window.setTimeout(getTime,100);
			}
		</script>
	</head>
	<body onload="getTime();">
		<div id="time"></div>
	</body>

		<!-- 使用setTimeout实现时钟 -->
		<script type="text/javascript">
			function getTime() {
				var date = new Date();
				var year = date.getFullYear();
				// var year = date.getYear() + 1900; 获取的是年数差
				var month = date.getMonth() + 1;
				var day = date.getDate();
				
				var hour = date.getHours();
				var min = date.getMinutes();
				var sec = date.getSeconds();
				
				var time = year  + "-" + month  + "-" + (day<10 ? "0"+day:day )  + " " + hour  + ":" + (min<10 ? "0"+min:min )  + ":" + sec;
				// console.log(year,month,day,hour,min,sec);	
				document.getElementById("time").innerText = time;
			}
		</script>
	</head>
	<body onload="setInterval(getTime,1000);">
		<div id="time"></div>
	</body>

从以上两段代码对比可以看出，setTimeout仅仅执行一次，而setInterval可以在没有终止条件的情况下无限执行。

追風者0x8ffd98a8

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现计数器、计时器——setTimeout与setInterval的区别

JavaScript实现计数器、计时器——setTimeout与setInterval的区别JavaScript代码可以在界面上实现计数器获取计时器，计数器和计时器的本质是数字的累加，而显示当前的本质是获取具体时间后的字符串操作。以上可以通过两种方式实现，一种是通过setTimeout调用函数，一种为setInterval调用函数。  <script type="text/javascript"> function
复制链接

扫一扫