首页 前端知识 在HTML中使用JavaScript实时显示当前日期和时间(结尾完整例程)

在HTML中使用JavaScript实时显示当前日期和时间(结尾完整例程)

2024-05-22 09:05:17 前端知识 前端哥 974 681 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9009.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!