HTML <time> 标签用于表示日期和时间，它提供了一种简单的方式来显示或隐藏具体的时间信息，这个标签通常与 JavaScript 一起使用，以实现更复杂的功能，如自动更新时间、格式化时间等。
基本用法
<time> 标签的基本用法非常简单，只需要在 HTML 文档中插入一个 <time> 标签，然后在其中输入日期和时间即可。
<p>会议开始时间：<time datetime="20220101T10:00">2022年1月1日 10:00</time></p>
在这个例子中，<time> 标签的 datetime 属性被设置为 "20220101T10:00"，这是 W3C 推荐的时间格式。<time> 标签内部的内容是可选的，如果省略，浏览器会显示 <time> 标签的 datetime 属性值。
JavaScript 交互
虽然 <time> 标签本身并不提供任何交互功能，但我们可以通过 JavaScript 来增强它的交互性，我们可以使用 JavaScript 来自动更新 <time> 标签的值，或者在用户点击 <time> 标签时显示一个提示框。
自动更新时间
要实现 <time> 标签的自动更新，我们可以使用 JavaScript 的 setInterval() 函数来定期修改 <time> 标签的 datetime 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>自动更新时间</title>
</head>
<body>
<p>当前时间：<time id="currentTime"></time></p>
<script>
function updateTime() {
var now = new Date();
var timeElement = document.getElementById("currentTime");
timeElement.datetime = now.toISOString();
}
setInterval(updateTime, 1000); // 每秒更新一次时间
</script>
</body>
</html>
在这个例子中，我们首先在 <time> 标签中添加了一个 id 属性，以便我们可以通过 JavaScript 来访问它，我们定义了一个名为 updateTime() 的函数，该函数获取当前时间，并将其转换为 W3C 推荐的时间格式，然后将这个值赋给 <time> 标签的 datetime 属性，我们使用 setInterval() 函数来每秒调用一次 updateTime() 函数，从而实现时间的自动更新。
点击提示框
要实现在用户点击 <time> 标签时显示一个提示框，我们可以使用 JavaScript 的 addEventListener() 函数来监听 click 事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>点击提示框</title>
</head>
<body>
<p>会议开始时间：<time id="meetingTime"></time></p>
<script>
function showTime() {
var timeElement = document.getElementById("meetingTime");
alert("会议开始时间：" + timeElement.textContent);
}
document.getElementById("meetingTime").addEventListener("click", showTime);
</script>
</body>
</html>
在这个例子中，我们首先在 <time> 标签中添加了一个 id 属性，以便我们可以通过 JavaScript 来访问它，我们定义了一个名为 showTime() 的函数，该函数获取 <time> 标签的文本内容，并显示一个包含这个内容的提示框，我们使用 addEventListener() 函数来监听 click 事件，并在用户点击 <time> 标签时调用 showTime() 函数。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477199.html
微信扫一扫