HTML5 – time
隨著互聯(lián)網(wǎng)的發(fā)展，我們?cè)絹?lái)越依賴時(shí)間的表述和處理。愛(ài)掏網(wǎng) - it200.comHTML5中引入了time元素，使得我們可以更加方便地表示和處理時(shí)間。愛(ài)掏網(wǎng) - it200.com
time元素可以用來(lái)標(biāo)記時(shí)間，它具有一個(gè)datetime屬性表示對(duì)應(yīng)的時(shí)間，還可以包含可讀的時(shí)間表示。愛(ài)掏網(wǎng) - it200.com
<time datetime="2021-12-31T23:59:59+08:00">2021年12月31日23:59:59</time>
在datetime屬性中，我們可以使用ISO 8601格式表示時(shí)間，包括日期和時(shí)間，時(shí)區(qū)以及可能的精度（例如，加入了小數(shù)以表示毫秒）。愛(ài)掏網(wǎng) - it200.com
可以看到，我們寫(xiě)出了可讀的時(shí)間，但同時(shí)給出了具體的時(shí)間戳，方便機(jī)器讀取和處理數(shù)據(jù)。愛(ài)掏網(wǎng) - it200.com
除了日期和時(shí)間之外，datetime屬性還可以用來(lái)表示持續(xù)時(shí)間，例如：
<time datetime="PT3H30M">3小時(shí)30分鐘</time>
在這個(gè)例子中，我們使用了ISO 8601持續(xù)時(shí)間格式，其中PT表示“持續(xù)時(shí)間”，后面的3H30M表示3小時(shí)30分鐘。愛(ài)掏網(wǎng) - it200.com
time元素的顯示效果
time元素默認(rèn)是有下劃線的，以提示用戶該文本是一個(gè)時(shí)間戳。愛(ài)掏網(wǎng) - it200.com在實(shí)際應(yīng)用中，我們可以利用CSS樣式對(duì)其進(jìn)行自定義。愛(ài)掏網(wǎng) - it200.com
<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設(shè)置了time元素的樣式，將字號(hào)設(shè)置為1.2rem，顏色為#666，下劃線去掉了。愛(ài)掏網(wǎng) - it200.com并且添加了一個(gè)hover時(shí)候的顏色。愛(ài)掏網(wǎng) - it200.com
time元素的Aria角色
對(duì)于時(shí)間元素，我們可以添加Aria角色來(lái)進(jìn)一步提示屏幕閱讀器用戶。愛(ài)掏網(wǎng) - it200.com
<time datetime="2021-12-31T23:59:59+08:00" role="timer">2021年12月31日23:59:59</time>
在這個(gè)例子中，我們使用了role=”timer”，以告訴屏幕閱讀器該元素是一個(gè)計(jì)時(shí)器。愛(ài)掏網(wǎng) - it200.com
time元素在JavaScript中的應(yīng)用
在JavaScript中，我們可以使用time元素的dateTime屬性來(lái)操作時(shí)間。愛(ài)掏網(wǎng) - it200.com
const timeElement = document.querySelector('time');
const dateTime = timeElement.dateTime;
const timeObject = new Date(dateTime);
console.log(timeObject);
在這個(gè)例子中，我們首先獲取了time元素的引用，然后從中獲取了dateTime屬性。愛(ài)掏網(wǎng) - it200.com接著，我們使用dateTime屬性創(chuàng)建一個(gè)JavaScript Date對(duì)象。愛(ài)掏網(wǎng) - it200.com
結(jié)論
time元素是HTML5中非常有用的元素之一，它可以方便地表示時(shí)間和持續(xù)時(shí)間，并且可以與JavaScript輕松結(jié)合使用。愛(ài)掏網(wǎng) - it200.com同時(shí)，結(jié)合CSS和Aria，我們可以讓time元素更加友好并且易于訪問(wèn)。愛(ài)掏網(wǎng) - it200.com