CSS和JavaScript都有辦法讓我們在網(wǎng)站上展示時間。
在CSS中,我們可以使用::before
偽元素和content
屬性來實現(xiàn)時間的展示。下面是一個例子:
.time::before { content: "現(xiàn)在的時間是:" attr(data-time); }
在上面的代碼中,我們給一個空的元素添加了一個類名time
,并且設(shè)置了一個自定義屬性data-time
來保存時間的值。然后我們利用CSS中的屬性選擇器和偽元素,在這個元素的前面添加了帶有時間的文字。
在JavaScript中,我們可以使用Date
對象來獲取當(dāng)前時間,并且利用setInterval
函數(shù)來讓時間以一定的間隔自動更新。下面是一個例子:
在上面的代碼中,我們先定義了一個函數(shù)updateTime
,這個函數(shù)會獲取當(dāng)前時間并且將它轉(zhuǎn)換為一個字符串。然后我們在頁面上找到一個用于展示時間的元素,并且調(diào)用textContent
方法來更新它的內(nèi)容。最后,我們利用setInterval
函數(shù)來讓這個updateTime
函數(shù)每秒鐘執(zhí)行一次。
上一篇css3多欄布局模型