JS动态显示时钟

最新推荐文章于 2022-04-04 12:19:50 发布

小白白成长记

最新推荐文章于 2022-04-04 12:19:50 发布

阅读量263

点赞数

分类专栏： HTML 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/weixin_53126056/article/details/111410979

版权

HTML 专栏收录该内容

35 篇文章

订阅专栏

本文将介绍如何利用JavaScript创建一个实时更新的动态时钟。通过JavaScript的Date对象和setInterval函数，我们可以每隔一定时间获取当前时间并更新到页面上，实现一个简单的网页时钟功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#timediv{
				
			width: 200px;
			height: 200px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById("timeT").onclick=function(){
					//一秒调用一次
					//返回值是一个可以取消周期性调用的value
					v = window.setInterval("Ttime()",1000)
				}
				
				document.getElementById("timeTT").onclick=function(){
					//停止周期性调用
					window.clearInterval(v)
				}
			}
				function Ttime(){
				var Time =new Date();
				document.getElementById("timediv").innerHTML=Time.toLocaleString();
				
				}
			
			
		</script>
		
		<input type="button"  value="显示当前时钟" id="timeT" />
		<input type="button"  id="timeTT" value="停止" />
		<div id="timediv">
			
		</div>
	</body>
</html>