用JavaScript实现在网页中显示时间表_怎么实现在网页中添加时间表格-CSDN博客

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107401450

本文介绍了一个使用JavaScript实现的网页实时日期时间显示功能。通过创建Date对象并格式化年、月、日、周几、小时、分钟和秒，再利用getElementById方法更新页面上的时间显示。最后，通过setInterval函数每秒调用显示函数，实现实时更新。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内置对象</title>
		<style>
			#time{
				display: block;
				font-size: 50px;
				font-family: "微软雅黑";
				background-color: antiquewhite;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<span id="time"></span>
		
		<script>
			function show(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;//月份从0开始
				month = month<10?"0"+month:month;
				var day = date.getDate();
				day = day<10?"0"+day:day;
				var week = date.getDay();
//				switch (week){
//					case 1:
//						week = "星期一";
//						break;
//					case 2:
//						week = "星期二";
//						break;
//					case 3:
//						week = "星期三";
//						break;	
//					case 4:
//						week = "星期四";
//						break;
//					case 5:
//						week = "星期五";
//						break;	
//					case 6:
//						week = "星期六";
//						break;
//					case 0:
//						week = "星期日";
//						break;
//				}
				//简化代码
				week = "日一二三四五六".charAt(week);
				week = "星期"+week;


				var hour = date.getHours();
				hour = hour<10?"0"+hour:hour;
				var minute = date.getMinutes();
				minute = minute<10?"0"+minute:minute;
				var second = date.getSeconds();
				second = second<10?"0"+second:second;
				
				var result = year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
				
				//通过它可以获取到指定id（time）的HTML元素
				document.getElementById("time").innerHTML=result;
			}
			
			show();
			
			//每隔指定时间执行一次指定的方法
			setInterval("show()",1000);
			
		</script>
		
	</body>
</html>