在页面上动态显示实时时间

最新推荐文章于 2022-04-12 11:17:24 发布

Curry 3O

最新推荐文章于 2022-04-12 11:17:24 发布

阅读量7.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： BOM

本文链接：https://blog.csdn.net/qq_42552393/article/details/97030086

BOM 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在网页上实现实时动态显示当前时间的功能，通过编程技术让时间每秒更新，创建一个实时更新的时钟界面。

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

需求：把当前的时间在页面上动态的显示出来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页动态时间</title>
	<script>
		window.onload = function(){
			var span = document.getElementsByTagName('span')[0];
			var dateStr = formatDate();
			// 将时间放置到span内
			span.innerText = dateStr;
			// 每隔一秒，再放置一次最新的时间
			setInterval(function(){
				span.innerText = formatDate();
			},1000);
			//格式化年月日时分秒 
			function formatDate(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				month = month<10?'0'+month:month;
				var day = date.getDate();
				day = day<10?'0'+day:day;
				var hours = date.getHours();
				hours = hours<10?'0'+hours:hours;
				var minutes = date.getMinutes();
				minutes = minutes<10?'0'+minutes:minutes;
				var seconds = date.getSeconds();
				seconds = seconds<10?'0'+seconds:seconds;
				// 2019-07-23 09:40:30
				return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
			}

		}
	</script>
</head>
<body>
	<div>
		当前时间：
		<span>将来放置时间</span>
	</div>
</body>
</html>

界面效果:
在这里插入图片描述