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

  1. 首页
  2. 新闻资讯
  3. 正文

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可以在没有终止条件的情况下无限执行。

上一个：小猫驱虫用什么药好（小猫驱虫用什么药好使）

下一个：C#反射调用dll文件中的方法操作泛型与属性字段_C#教程

热门文章

归纳