在HTML中使用JavaScript实时显示当前日期和时间（结尾完整例程）
我爱喝伊利 2024-06-24 08:35:01 阅读 74
在Web开发中，经常需要在网页上显示当前的日期和时间。HTML本身并不具备这样的动态功能，但我们可以借助JavaScript来实现。JavaScript是一种常用的前端脚本语言，它可以轻松地获取系统时间，并将其插入到HTML元素中。
下面是一个简单的示例，演示如何在HTML中使用JavaScript实时显示当前的日期和时间：
首先，我们创建一个HTML文件，并在其中添加一个用于显示日期和时间的<p>元素。给它一个唯一的id，这样我们就可以通过JavaScript找到它并更新其内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实时显示当前日期和时间</title> </head> <body> <p id="currentDateTime">加载中...</p> <!-- 引入JavaScript代码 --> <script src="display-datetime.js"></script> </body> </html>
接下来，我们创建一个名为display-datetime.js的JavaScript文件，并编写用于获取和格式化当前日期时间的函数。
// 显示当前日期时间的函数 function showCurrentDateTime() { const now = new Date(); const year = now.getFullYear(); const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以+1 const day = String(now.getDate()).padStart(2, '0'); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; document.getElementById('currentDateTime').textContent = formattedDateTime; } // 页面加载完成后立即显示当前日期时间 window.onload = showCurrentDateTime; // 每秒更新一次日期时间显示 setInterval(showCurrentDateTime, 1000);
在JavaScript文件中，我们定义了一个showCurrentDateTime函数，它使用Date对象获取当前的日期和时间，并将其格式化为YYYY-MM-DD HH:MM:SS的形式。然后，我们通过document.getElementById找到具有指定id的HTML元素，并使用textContent属性设置其内容为格式化后的日期时间字符串。
为了使页面加载完成后立即显示当前的日期时间，我们使用了window.onload事件。此外，我们还使用setInterval函数每秒调用一次showCurrentDateTime函数，以便实时更新显示的日期时间。
最后，将JavaScript文件与HTML文件关联起来。在HTML文件的<body>标签底部，使用<script>标签引入JavaScript文件。
现在，当您打开这个HTML页面时，它将实时显示当前的日期和时间，并且每秒都会自动更新。
完整例子程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示当前日期和时间</title> </head> <body> <p id="currentDateTime">加载中...</p> <script> function showCurrentDateTime() { const now = new Date(); const year = now.getFullYear(); const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要+1 const day = String(now.getDate()).padStart(2, '0'); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; document.getElementById('currentDateTime').textContent = formattedDateTime; } // 初始显示当前日期和时间 showCurrentDateTime(); // 每秒更新一次日期和时间 setInterval(showCurrentDateTime, 1000); </script> </body> </html>
上一篇： 华为OD机试 - 路口最短时间问题（Java & JS & Python & C & C++）
下一篇： 华为OD机试 - 音乐小说内容重复识别（Java & JS & Python & C++）
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。