HTML5 – time

随着互联网的发展，我们越来越依赖时间的表述和处理。HTML5中引入了time元素，使得我们可以更加方便地表示和处理时间。

time元素的基本语法

time元素可以用来标记时间，它具有一个datetime属性表示对应的时间，还可以包含可读的时间表示。

<time datetime="2021-12-31T23:59:59+08:00">2021年12月31日23:59:59</time>

在datetime属性中，我们可以使用ISO 8601格式表示时间，包括日期和时间，时区以及可能的精度（例如，加入了小数以表示毫秒）。

可以看到，我们写出了可读的时间，但同时给出了具体的时间戳，方便机器读取和处理数据。

除了日期和时间之外，datetime属性还可以用来表示持续时间，例如：

<time datetime="PT3H30M">3小时30分钟</time>

在这个例子中，我们使用了ISO 8601持续时间格式，其中PT表示“持续时间”，后面的3H30M表示3小时30分钟。

time元素的显示效果

time元素默认是有下划线的，以提示用户该文本是一个时间戳。在实际应用中，我们可以利用CSS样式对其进行自定义。

<style>
  time {
    font-size: 1.2rem;
    color: #666;
    text-decoration: none;
  }
  time:hover {
    color: #f00;
  }
</style>
<time datetime="2021-12-31T23:59:59+08:00">2021年12月31日23:59:59</time>

我们使用CSS设置了time元素的样式，将字号设置为1.2rem，颜色为#666，下划线去掉了。并且添加了一个hover时候的颜色。

time元素的Aria角色

对于时间元素，我们可以添加Aria角色来进一步提示屏幕阅读器用户。

<time datetime="2021-12-31T23:59:59+08:00" role="timer">2021年12月31日23:59:59</time>

在这个例子中，我们使用了role=”timer”，以告诉屏幕阅读器该元素是一个计时器。

time元素在JavaScript中的应用

在JavaScript中，我们可以使用time元素的dateTime属性来操作时间。

const timeElement = document.querySelector('time');
const dateTime = timeElement.dateTime;
const timeObject = new Date(dateTime);
console.log(timeObject);

在这个例子中，我们首先获取了time元素的引用，然后从中获取了dateTime属性。接着，我们使用dateTime属性创建一个JavaScript Date对象。