HTML5 – time

隨著互聯網的發展，我們越來越依賴時間的表述和處理。愛掏網 - it200.comHTML5中引入了time元素，使得我們可以更加方便地表示和處理時間。愛掏網 - it200.com

time元素可以用來標記時間，它具有一個datetime屬性表示對應的時間，還可以包含可讀的時間表示。愛掏網 - it200.com

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

在datetime屬性中，我們可以使用ISO 8601格式表示時間，包括日期和時間，時區以及可能的精度（例如，加入了小數以表示毫秒）。愛掏網 - it200.com

可以看到，我們寫出了可讀的時間，但同時給出了具體的時間戳，方便機器讀取和處理數據。愛掏網 - it200.com

除了日期和時間之外，datetime屬性還可以用來表示持續時間，例如：

<time datetime="PT3H30M">3小時30分鐘</time>

在這個例子中，我們使用了ISO 8601持續時間格式，其中PT表示“持續時間”，后面的3H30M表示3小時30分鐘。愛掏網 - it200.com

time元素的顯示效果

time元素默認是有下劃線的，以提示用戶該文本是一個時間戳。愛掏網 - it200.com在實際應用中，我們可以利用CSS樣式對其進行自定義。愛掏網 - 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設置了time元素的樣式，將字號設置為1.2rem，顏色為#666，下劃線去掉了。愛掏網 - it200.com并且添加了一個hover時候的顏色。愛掏網 - it200.com

time元素的Aria角色

對于時間元素，我們可以添加Aria角色來進一步提示屏幕閱讀器用戶。愛掏網 - it200.com

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

在這個例子中，我們使用了role=”timer”，以告訴屏幕閱讀器該元素是一個計時器。愛掏網 - it200.com

time元素在JavaScript中的應用

在JavaScript中，我們可以使用time元素的dateTime屬性來操作時間。愛掏網 - it200.com

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

在這個例子中，我們首先獲取了time元素的引用，然后從中獲取了dateTime屬性。愛掏網 - it200.com接著，我們使用dateTime屬性創建一個JavaScript Date對象。愛掏網 - it200.com

結論

time元素是HTML5中非常有用的元素之一，它可以方便地表示時間和持續時間，并且可以與JavaScript輕松結合使用。愛掏網 - it200.com同時，結合CSS和Aria，我們可以讓time元素更加友好并且易于訪問。愛掏網 - it200.com