html页面显示系统时间-格式为： xxxx年xx月xx日 xx:xx:xx （时分秒）

最新推荐文章于 2024-07-15 07:00:00 发布

豁达吃早餐的LLL.

最新推荐文章于 2024-07-15 07:00:00 发布

阅读量5k

点赞数 4

分类专栏： JavaScript 文章标签： html javascript

本文链接：https://blog.csdn.net/qq_57804294/article/details/131550073

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

该代码示例展示了如何利用JavaScript的Date对象在HTML页面上创建一个实时更新的系统时间显示。通过获取日期和时间信息，格式化输出，并使用setInterval函数每秒更新页面上的时间显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html页面中显示系统时间：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示系统时间</title>
    <style>
        /* 将系统时间渲染到div盒子中 */
        div {
            margin: 100px auto;
            width: 300px;
            height: 40px;
            border: 1px solid skyblue;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <!-- 创建一个div -->
    <div></div>
    <script>
        // 获取div
        const div = document.querySelector('div')
        // 获取系统时间的函数
        function getNowDate() {
            // 获取日期对象 
            const date = new Date()
            // 获取系统当前的小时，分钟，秒，分别赋值给:h , m , s 三个变量
            let h = date.getHours()
            let m = date.getMinutes()
            let s = date.getSeconds()
            // 实现输出格式为: xx:xx:xx  (时：分：秒)
            h = h < 10 ? '0'+h :h
            m = m < 10 ? '0'+m :m
            s = s < 10 ? '0'+s :s
            return `今天是：${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日 ${h}:${m}:${s}`    //getMonth() 获取月份取值从0开始，故实际月份要加1
        }
        // 先调用一次，刷新页面直接就会显示系统时间，否则会有延迟一秒钟的等待。
        div.innerHTML = getNowDate()
        // 设置时间间隔，1000毫秒执行一次，也就是一秒执行一次。
        setInterval(function(){
        // 调用函数，将函数返回值写入到div标签中
            div.innerHTML = getNowDate()
        },1000)
    </script>
</body>
</html>