js获取并在页面显示实时时间

最新推荐文章于 2024-07-18 11:50:26 发布

菊花枸杞茶

最新推荐文章于 2024-07-18 11:50:26 发布

阅读量816

点赞数 1

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

本文链接：https://blog.csdn.net/qq_34227291/article/details/88910830

版权

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

2 篇文章 0 订阅

订阅专栏

js获取并在页面显示实时时间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js获取并在页面显示实时时间</title>
	<script>
		// 方法一（不刷新）
		// var d = new Date();
		// document.write(d);
		// document.write(d.getHours()+":"+d.getMinutes());

		// 方法二（实时刷新）SetInterval为自动重复，setTimeout不会重复。
		// window.onload加载事件在页面内容加载完成之后立即执行以下函数
		window.function(){
			// 每隔1秒执行一次函数
			setInterval(function(){
				var demo = document.getElementById("demo");// 获取DOM
				var time = new Date();					   //获取当日的日期和时间
				var h = time.getHours();				   //获取Date对象当日的小时
				var m = time.getMinutes();				   //获取Date对象当日的分钟
				var s = time.getSeconds();				   //获取Date对象当日的小时毫秒
				demo.innerHTML=h+":"+m+" "+s;			   //使用innerHTML将内容写p标签DOM节点，不会导致页面重绘。
				// 附：document.write()和document.innerHTML()的区别：document.write()是直接写入页面的内容流，如果写之前没有调用document.open，浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
			},1000)// 设定1秒后再次执行一次代码
		}
	</script>
</head>
<body>
	<!-- 方法二 -->
	<p id="demo"></p>
</body>
</html>