用js显示当前时间

我的笑狗很磕癌.

已于 2023-04-14 18:08:12 修改

阅读量1.9k

点赞数 6

文章标签： javascript 前端 html

于 2023-04-14 17:56:38 首次发布

本文链接：https://blog.csdn.net/2302_77621744/article/details/130159176

版权

在初步学习js时，可能会有一些朋友能用上js来显示时间，因此我在此提供一种方法供大家参考。

以下是我全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#time {
				color: red;
				font-size: 30px;

				
				
			}
		</style>
	</head>
	<body>
		<div id = "time"></div>
		<script>
			function show(){
				var weeks = ['天','一','二','三','四','五','六'];
				var myTime = new Date();
				var year = myTime.getFullYear();
				var month = myTime.getMonth()+1;
				var day = myTime.getDate();
				var week = myTime.getDay();
				var hours = myTime.getHours();
				var minutes = myTime.getMinutes();
				var seconds = myTime.getSeconds();
				
				var timeStr = '今天是：' +year + '年' + month + '月' + day + '日 星期' + weeks[week]+hours+'时'+minutes+'分'+seconds+'秒';
				
				document.getElementById("time").innerHTML = timeStr;
			}
			window.onload = function(){
				show();
				setInterval('show()' ,1000);
			}
		</script>
	</body>
</html>

其中，关键代码是js

<script>
			function show(){
				var weeks = ['天','一','二','三','四','五','六'];
				var myTime = new Date();
				var year = myTime.getFullYear();
				var month = myTime.getMonth()+1;
				var day = myTime.getDate();
				var week = myTime.getDay();
				var hours = myTime.getHours();
				var minutes = myTime.getMinutes();
				var seconds = myTime.getSeconds();
				
				var timeStr = '今天是：' +year + '年' + month + '月' + day + '日 星期' + weeks[week]+hours+'时'+minutes+'分'+seconds+'秒';
				
				document.getElementById("time").innerHTML = timeStr;
			}
			window.onload = function(){
				show();
				setInterval('show()' ,1000);
			}
		</script>

效果如图所示

关键代码解释如下

setInterval:

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
　　setinterval()用法

　　setInterval(code,millisec[,"lang"])

　　后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计.

getElementById:

getElementById是JavaScript中的一个DOM方法，用于根据元素的id属性获取HTML文档中的元素。该方法接受一个字符串参数，即元素的id属性值，并返回具有该id属性值的元素。如果没有找到匹配的元素，则返回null。

innerHTML:

innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；
如：<div id="aa">这是内容</div>

我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;
这样就能向id为abc的对象插入内容。