实时日期和时间 HTML - JavaScript

当我们创建一个包含动态数据的网页时，经常需要显示实时日期和时间。HTML和JavaScript提供了多种方法来实现这一点。

HTML标签

HTML标签中的<time>元素可以用来呈现日期和时间，其datetime属性指定日期和时间的值，而innerText属性则用于显示格式化后的日期和时间。

<p>现在的时间是：<time datetime="2022-05-19T14:30">2022年5月19日 14:30</time></p>

这会将显示的文本转换为Web浏览器中的本地时区时间。

JavaScript对象

使用JavaScript可以创建一个Date对象，并通过该对象来获取当前的日期和时间。我们可以使用JavaScript中的setInterval()函数来更新显示的时间，以便每秒钟更新一次。

function updateTime() {
    const now = new Date();
    const time = now.toLocaleString();
    document.getElementById('current-time').innerText = time;
}

setInterval(updateTime, 1000);

这会将id为'current-time'的元素的innerText属性设置为当前时间的格式化字符串。

Moment.js库

Moment.js是一个流行的JavaScript库，可用于快速格式化和操作日期和时间。使用Moment.js，我们可以轻松地进行各种日期和时间操作。

const now = moment();
const formatted = now.format('YYYY年MM月DD日 HH:mm:ss');
document.getElementById('current-time').innerText = formatted;

这会将格式化后的当前时间字符串分配给id为'current-time'的元素的innerText属性。

Bootstrap库

如果您正在使用Bootstrap库，那么可以使用其中的<span>标签和类来轻松地呈现日期和时间。

<span class="badge badge-secondary"><i class="fas fa-clock"></i> 2022年5月19日 14:30 </span>

这会创建一个Bootstrap徽章，其中包含一个图标和格式化后的时间。

无论您选择哪种方法，都可以使用HTML和JavaScript来呈现实时日期和时间。在使用任何库之前，请确保查看该库的文档以获取有关如何正确包含并使用它的详细信息。