在HTML中显示系统时间,是许多网站开发者和设计师都需要掌握的技能,如何在不借助第三方插件的情况下,轻松地在网页上展示实时的时间呢?我就来为大家详细讲解一下,如何用HTML和JavaScript实现这一功能。
我们需要创建一个HTML文件,并在其中添加一个用于显示时间的元素,我们将使用JavaScript来获取系统时间,并按照指定的格式展示在网页上。
以下是一个 step-by-step 的教程,让我们一起来看看吧!
第一步:创建HTML结构
我们要创建一个简单的HTML结构,在这个结构中,我们将使用一个<div>元素来显示时间,代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示系统时间</title>
</head>
<body>
<div id="time"></div>
<script src="script.js"></script>
</body>
</html>
这里,我们为<div>元素设置了一个id,方便在JavaScript中对其进行操作。
第二步:编写JavaScript代码
我们要编写JavaScript代码,用于获取系统时间并格式化输出,我们创建一个名为script.js的JavaScript文件,并在其中编写以下代码:
function showTime() {
var date = new Date(); // 获取当前时间
// 获取年、月、日、小时、分钟、秒
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
// 格式化时间,2021-09-01 12:12:12
var formattedTime = year + '-' +
(month < 10 ? '0' + month : month) + '-' +
(day < 10 ? '0' + day : day) + ' ' +
(hour < 10 ? '0' + hour : hour) + ':' +
(minute < 10 ? '0' + minute : minute) + ':' +
(second < 10 ? '0' + second : second);
// 将格式化后的时间显示在页面中
document.getElementById('time').innerHTML = formattedTime;
}
// 每秒更新时间
setInterval(showTime, 1000);
在这段代码中,我们首先创建了一个Date对象,用于获取当前系统时间,通过调用getFullYear()、getMonth()、getDate()、getHours()、getMinutes()和getSeconds()方法,分别获取年、月、日、小时、分钟和秒。
为了使时间显示为“2021-09-01 12:12:12”这样的格式,我们对获取到的月、日、小时、分钟和秒进行了格式化处理,如果这些值小于10,我们会在其前面添加一个0。
我们使用getElementById()方法找到页面中的<div>元素,并将格式化后的时间赋值给其innerHTML属性,通过setInterval()函数,我们设置了一个定时器,每隔1000毫秒(即1秒)更新一次时间。
第三步:查看效果
完成以上步骤后,我们只需要在浏览器中打开这个HTML文件,就能看到实时的系统时间显示在页面上了,随着时间的推移,页面上的时间会自动更新。
通过以上教程,相信大家已经掌握了在HTML中显示系统时间的方法,这个功能在很多场景中都非常有用,例如倒计时、时间戳转换等,希望这篇文章能对你有所帮助,如果你有任何疑问,也欢迎继续探讨,以下是几个小贴士,可以帮助你进一步优化时间显示:
- 可以根据需求,调整时间格式,例如去掉年份或者秒数;
- 可以使用CSS对时间显示样式进行美化,使其更符合网站的整体风格;
- 如果需要在不同时区显示时间,可以使用JavaScript的
Date对象提供的时区转换方法。
就这样,一个简单的系统时间显示功能就完成了,希望这个教程能让你在HTML和JavaScript的学习之路上更进一步!

