使用JavaScript在页面打印系统当前时间

最新推荐文章于 2024-03-07 14:51:01 发布

AnFooo

最新推荐文章于 2024-03-07 14:51:01 发布

阅读量9.4k

点赞数 2

分类专栏： Java Web

本文链接：https://blog.csdn.net/DangerousMc/article/details/102672678

版权

Java Web 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

一.获取当前时间

二.将时间打印在页面上

三.使网页中的时间动起来

一.获取当前时间

在JavaScript中，有一个内置对象Date（），其中包含了众多方法来获取系统的当前时间，该篇以如下的七个常用方法为例打印系统的当前时间

方法	描述
getFullYear()	返回四位数字表示的年份
getMonth()	返回月份 (0 ~ 11)
getDate()	返回一个月中的某一天 (1 ~ 31)
getDay()	返回一周中的某一天 (0 ~ 6)
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)

以下是创建Date()对象并获取当前时间并按规范格式打印在控制台的代码示例：

<!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="按钮" onclick="test()"/>
	</body>
</html>

二.将时间打印在页面上

在第八行写一个div双标签，id名叫做time，然后将JavaScript代码中的console语句改为第二十七行的代码。

这行代码的意义是使用document代指整个HTML文件，然后在文件中寻找一个id名为“time”的标签，然后将current的值添加到该标签的innerHTML中，就可以在该div的区域显示要输出的系统时间了，代码示例如下：

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

三.使网页中的时间动起来

因为我们示例中的时间是精确到秒的，所以要想让它动就是让它每秒变换一次，这里要先介绍一个方法：setInterval()

它参数列表中有两个参数，第一个参数是传入要执行的方法名，第二个参数是传入两次执行之间的间隔时间，以下是使用示例：

<!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" onclick="test()" value="按钮" />
	</body>
</html>

但是该方法在第一次执行之前会先停顿一个1000毫秒，所以执行test方法时会有1000毫秒的延迟，解决办法就是在调用该方法之前先手动执行一次test方法，这时在页面中test方法的执行就没有延迟了，会是立刻执行的。而且要注意，由于HTML代码是按顺序加载的，所以要是手动执行一次test方法就必须将input标签放在script标签前面加载，如下：

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

接下来再将该方法用到显示时间的示例中，如下：

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