JavaScript学习笔记8

最新推荐文章于 2024-09-14 18:52:56 发布

逆流！

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量61

点赞数

分类专栏： javaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_38720471/article/details/109146150

版权

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

19 篇文章 0 订阅

订阅专栏

时钟效果的两种实现方法
1.setTimeout()实现

<html>
<head>
	<meta charset="UTF-8">
	<title>时钟效果setTimeout</title>
	<script type="text/javascript">
		function clock(){
			//得到当前时间
			var now=new Date();
			
			//将当前的时间显示在div中 
			document.getElementById("time").innerHTML=now.toLocaleString();
			window.setTimeout(clock,1000);//一秒后调用函数
		}
		//window.onload=clock;//页面加载完成后，立刻调用
		//window.setTimeout(clock,1000);//一秒后调用函数
	</script>
</head>
<body onload="clock()">
	<div id="time"></div>
</body>
</html>

注意点：1.setTimeout(clock,1000)是在某个时间后调用clock函数
2.可通过window.onload函数在页面加载完成后，进行clock函数调用

2.serInterval()函数实现调用。

<html>
<head>
	<meta charset="UTF-8">
	<title>时钟效果	</title>
	<script type="text/javascript">
		function clock(){
			//得到当前时间
			var now=new Date();
			//将当前的时间显示在div中 
			document.getElementById("time").innerHTML=now.toLocaleString();
		}
		var myClock=window.setInterval(clock,1000);//指定间隔时间，每隔一秒调用clock函数一次
		function pauseClock(){
			window.clearInterval(myClock);//清除myClock变量
		}
		function continueClock(){
			myClock=window.setInterval(clock,1000);//再次定义myClock变量
		}
		
	</script>
</head>
<body >
	<div id="time"></div>
	<input type="button" value="暂停" onclick="pauseClock()"/>//点击按钮，调用函数
	<input type="button" value="继续" onclick="continueClock()"/>
</body>
</html>