HTML中如何实现时间在页面中实时更新_html插入自动更新时间-优快云博客

本文链接：https://blog.youkuaiyun.com/zzu957/article/details/107401549

本文详细介绍如何使用JavaScript在网页上显示当前时间，并通过setInterval方法实现时间的实时更新。文章还介绍了如何利用charAt方法简化星期显示的代码。

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

如何查询时间

<script>
	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 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;
		}				
	}
	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;
	console.log(year+"."+month+"."+day+" "+week+" "+hour+":"+minute+":"+second);
</script>

此时完成了显示代码运行时时间的查询，但无法在页面中显示，需要通过F12查询。

如何在页面中显示

我们需要通过document.getById(“id”).innerHTML来实现，代码为:

<body>
	<span id="time"></span>
		
	<script>
		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 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;
			}				
		}
		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 ;
		document.getElementById("time").innerHTML = result;
	</script>
</body>

结果显示为：
在这里插入图片描述

如何实时更新

如果想实现时间实时更新，则需要借助setInterval(“方法”，时间)来实现。

<body>
	<span id="time"></span>
		
	<script>
		function show(){
			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 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;
				}				
			}
			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 ;
			document.getElementById("time").innerHTML = result;
		}
		show();
		setInterval("show()",1000);
	</script>
</body>

自此实现了时间在页面中实时更新的目的。
改进
通过charAt（）方法简化星期变化。

<script>
	week="日一二三四五六".charAt(week);
	week="星期"+week;
</script>