HTML中如何实现时间在页面中实时更新

查询时间的方法

<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;
			}				
		}*/

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

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

在页面中显示时间

我们需要通过document.getById(“id”).innerHTML来实现，并将代码写至body中，创建新对象，代码为:

<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;
			}				
		}*/

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

HTML中如何实现时间在页面中实时更新

查询时间的方法

在页面中显示时间

实时更新时间

猜你喜欢