两种定时器

计时器

循环计时器

问题: 实现页面时间显示,点击开始时间走动,点击停止,时间不走

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var timer;
			function start(){
			 	timer=setInterval('DataTime()',1000);
			}
			function DataTime(){
				var timer=new Date();
				document.getElementById('h3').innerText=timer;
			}
			function over(){
				clearInterval(timer);
			}
		</script>
	</head>
	<body>
		<h3 id="h3">循环计时器</h3>
		<button id="btn1" onclick="start();">开始</button>
		<button id="btn2" onclick="over();">结束</button>
	</body>
</html>

炸弹计时器

实现时间显示在页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function load(){
				var h3=document.getElementById('h3');
				//获取当前时间
				var datatime=new Date();
				h3.innerText=datatime;
				setTimeout('load()',1000);
			}
		</script>
	</head>
	<body "load();">
		<h3 id="h3"></h3>
	</body>
</html>

循环计时器和炸弹计时器之间的区别:
setInterval(cb, ms) 全局函数在指定的毫秒(ms)数后执行指定函数(cb)。返回一个代表定时器的句柄值。可以使用 clearInterval() 函数来清除定时器。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
etTimeout(cb, ms) 全局函数在指定的毫秒(ms)数后执行指定函数(cb)。setTimeout() 只执行一次指定函数。返回一个代表定时器的句柄值。

猜你喜欢

转载自blog.csdn.net/weixin_43750162/article/details/87804159