javascript实现日期时间动态显示示例代码

2023年5月27日下午12:21 • JavaScript

下面我详细讲解一下“javascript实现日期时间动态显示示例代码”的完整攻略：

1. 前置知识

在学习本文之前，需要掌握以下基础知识：
- HTML基础语法
- CSS基础语法
- JavaScript基础语法
- JavaScript日期对象的使用方法

2. 实现方法及代码解析

2.1 方法1：使用setInterval()函数实现

使用setInterval()函数可以让JavaScript代码定时执行某个函数或代码块。在实现日期时间动态显示的例子中，我们可以使用setInterval()函数每隔一秒钟执行一次动态更新时间的操作。

下面是示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript日期时间动态显示示例</title>
</head>
<body>
    <h1 id="now"></h1>
    <script type="text/javascript">
        function updateTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();

            // 处理时间格式
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hour = hour < 10 ? '0' + hour : hour;
            minute = minute < 10 ? '0' + minute : minute;
            second = second < 10 ? '0' + second : second;

            var timeStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
            document.getElementById('now').innerText = timeStr;
        }

        updateTime();   // 加载页面时更新时间
        setInterval(updateTime, 1000);  // 每隔一秒钟更新时间
    </script>
</body>
</html>

代码解析：
- 首先在HTML中添加一个标题元素用于显示时间，ID为“now”；
- 在JavaScript中定义一个updateTime()函数用于获取当前时间，将获取到的时间格式化后更新到标题元素中；
- 在页面加载时先调用一次updateTime()函数更新时间显示；
- 接着使用setInterval()函数每隔一秒钟调用一次updateTime()函数，实现动态更新时间的功能。

2.2 方法2：使用setTimeout()函数实现

除了使用setInterval()函数进行动态更新，我们还可以使用setTimeout()函数每隔一秒钟更新一次时间，这种方法可以减少一些代码执行时间。

下面是示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript日期时间动态显示示例</title>
</head>
<body>
    <h1 id="now"></h1>
    <script type="text/javascript">
        function updateTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();

            // 处理时间格式
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hour = hour < 10 ? '0' + hour : hour;
            minute = minute < 10 ? '0' + minute : minute;
            second = second < 10 ? '0' + second : second;

            var timeStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
            document.getElementById('now').innerText = timeStr;

            setTimeout(updateTime, 1000);   // 过一秒后再更新时间
        }

        updateTime();   // 加载页面时更新时间
    </script>
</body>
</html>

代码解析：
- 与方法1相同，在HTML中添加一个标题元素用于显示时间，ID为“now”；
- 在JavaScript中定义一个updateTime()函数用于获取当前时间，将获取到的时间格式化后更新到标题元素中；
- 在页面加载时先调用一次updateTime()函数更新时间显示；
- 在updateTime()函数中通过setTimeout()函数每隔一秒钟调用一次updateTime()函数，实现动态更新时间的功能。

至此，我们就讲解了两种JavaScript实现日期时间动态显示的方法。希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现日期时间动态显示示例代码 - Python技术站