How to realize real-time update of time in the page in HTML

How to check the time

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

At this time, the query to display the runtime time of the code is completed, but it cannot be displayed on the page, and it needs to be queried through F12.

Show time on page

We need to implement it through document.getById("id").innerHTML, and write the code to the body to create a new object. The code is:

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

Real-time update time

If you want to update the time in real time, you need to use setInterval ("method", time).

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

 

Guess you like

Origin blog.csdn.net/m0_46383618/article/details/107407254