The use of JavaScript in the page to print the current time

A. Get the current time

In JavaScript, there is a built-in object Date (), which contains a number of methods to get the current time system, the article to seven common method of printing system as an example the current time

method description
getFullYear() Returns the year four digits
getMonth() Returns the month (0 - 11)
getDate() Returns a day (1 to 31) of the month
getDay() One day (0-6) Returns the week
getHours() Date object hr (0 to 23)
getMinutes() Date object minutes (0 to 59)
getSeconds() Date object seconds (0 to 59)

 

The following is to create a Date () object and get the current time format sample code printed on the console and press specification:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function test(){
				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="日一二三四五六".charAt(date.getDay());
				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 current=year+"-"+month+"-"+day+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
				console.log(current);
			}
		</script>
		
		<input type="button" value="按钮" οnclick="test()"/>
	</body>
</html>

II. The time printed on the console

In the eighth row of double write a div tag, id name is called time, then the JavaScript code in the console statement to Code twenty seventh row.

Significance of this line is to use the document on behalf of that whole HTML file, and then look for an id tag called "time" in the file, and then add to the current value of the innerHTML tag, can be displayed in the area of ​​the div the system time to be output, code examples are as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="time"></div>
		
		<script>
			function test(){
				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="日一二三四五六".charAt(date.getDay());
				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 current=year+"-"+month+"-"+day+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
				document.getElementById("time").innerHTML=current;
			}
			test();
		</script>
	</body>
</html>

III. The time to move up a Web page

Because of the time in our example is accurate to the second, so in order to make it move is to make it transforms every second, a method introduced here first: setInterval ()

It has two parameters in the parameter list, the first parameter is passed the name of the method to be executed, the second parameter is the time interval between two incoming performed, using the following example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var i=1;
			function test(){
				console.log(i++);
			}
			setInterval("test()",1000);
		</script>
		
		<input type="button" οnclick="test()" value="按钮" />
	</body>
</html>

However, this method before the first performance will be a pause before 1000 milliseconds, 1000 milliseconds so there will be a delay in the implementation of test methods, the solution is before calling this method to manually perform a test method, then the page test method the execution will be no delays, and will be immediately executed. Also to be noted that, since the HTML code is sequentially loaded, so if a manual method of performing a test label must be placed in front of the script tag input loading, as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" οnclick="test()" value="按钮" />
		
		<script>
			var i=1;
			function test(){
				console.log(i++);
			}
			test();
			setInterval("test()",1000);
		</script>
	</body>
</html>

Then again the example of the display method used in time, as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="time"></div>
		
		<script>
			function test(){
				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="日一二三四五六".charAt(date.getDay());
				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 current=year+"-"+month+"-"+day+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
				document.getElementById("time").innerHTML=current;
			}
			test();
			setInterval("test()",1000);
		</script>
	</body>
</html>

发布了99 篇原创文章 · 获赞 93 · 访问量 5230

Guess you like

Origin blog.csdn.net/DangerousMc/article/details/102672678