HTML实现页面实时更新时间

最新推荐文章于 2021-06-04 05:59:35 发布

Stay_close

最新推荐文章于 2021-06-04 05:59:35 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_46384325/article/details/107441210

版权

<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在页面中查询，但是无法直接在页面显示。若要在页面中显示需要使用inner方法。

<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>

如此便可以在页面中显示时间，但无法实时更新。实时更新需要用到setInterval方法实现。

<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>

switch语句过于冗长，可以通过charAt方法简化代码。

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