在web頁面中，我們常常需要顯示時間信息。CSS動態顯示時間是一種常用的方式。那么如何使用CSS動態顯示時間呢？接下來我們詳細了解一下。
/*定義當前時間*/
function currentTime() {
var d = new Date(), //新建一個Date對象，來獲取當前時間
h = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds(),
date = d.getDate(),
month = d.getMonth() + 1,
year = d.getFullYear();
/*判斷小時，分鐘和秒數是否超過10，如果是，則在前面加0*/
h = (h< 10) ? "0" + h : h;
m = (m< 10) ? "0" + m : m;
s = (s< 10) ? "0" + s : s;
/*將時間信息寫入msg字符串*/
var msg = h + ":" + m + ":" + s + " " + date + "." + month + "." + year;
/*設置msg字符串為HTML元素的內容*/
document.getElementById("clock").innerHTML = msg;
/*每秒更新一次時間*/
setTimeout(currentTime, 1000);
}在這段代碼中，我們創建了一個currentTime()函數。該函數通過Date對象獲取當前日期和時間，并將其以小時、分鐘和秒數的形式顯示。
在JavaScript中，我們需要判斷小時、分鐘和秒數是否大于或等于10。如果它們不大于或等于10，需要在它們的前面加上0。然后，我們將時間信息作為一個字符串寫入到HTML文檔的元素中，以便在瀏覽器中顯示出時間。
最后，我們設置setTimeout()函數，每秒鐘更新一次時間。通過這種方式，我們可以實現CSS動態顯示時間。
上述代碼可通過添加以下HTML代碼運行：
<body onload="currentTime()"> <p id="clock"></p> </body>
這段代碼將引用已經定義好的JavaScript函數，并設置在文檔加載時自動啟動。這將使我們的網頁在打開時立即顯示當前的時間。
總之，使用CSS動態顯示時間是一種簡單的實現方式。通過這種方式，我們可以為我們的網頁添加一個不斷更新的時間信息。這樣會讓我們的網頁看起來更加生動和實用。