JavaScript--定时器

最新推荐文章于 2022-06-04 14:47:03 发布

逸川先生

最新推荐文章于 2022-06-04 14:47:03 发布

阅读量157

点赞数

分类专栏： JS学习笔记文章标签： JavaScript 定时器 setinterval settimeout

本文链接：https://blog.csdn.net/qq_38238041/article/details/80982264

版权

JS学习笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
	
	<div style="width: 300px;height: 200px;background-color: #EEE;" id="divid"></div>
	<!-- 定时器 -->
	<!-- 1.setTimeout ->一次性的 -->
	<script type="text/javascript">
		var timer1;
		function timeout(){
			timer1 = window.setTimeout("f1()",1000);
		}
		function f1(){
			document.getElementById("divid").innerHTML += "1";
		}
		function closetimeout(){
			window.clearTimeout(timer1);
		}
	</script>
	<!-- 2.setInterval ->周期性的 -->
	<script type="text/javascript">
		var timer2;
		function interval(){
			timer2 = window.setInterval("f2()",1000);
		}
		function f2(){
			document.getElementById("divid").innerHTML += "2";
		}
		function closeinterval(){
			window.clearInterval(timer2);
		}
	</script>
	
	<br><br><br>
	<input type="button" οnclick="timeout()" value="开启一次性定时器">
	    
	<input type="button" οnclick="closetimeout()" value="关闭一次性定时器">
	
	<br><br><br>
	<input type="button" οnclick="interval()" value="开启周期性定时器">
	    
	<input type="button" οnclick="closeinterval()" value="关闭周期性定时器">
</body>
</html>