CSS 顯示時間設置 在網頁設計中，很多時候需要在頁面上顯示時間。CSS提供了一種簡單易用的方法來實現這個功能。在下面的示例中，我們將演示如何在網頁上顯示當前時間。 首先，在HTML中創建一個空元素，其ID屬性為“clock”：

<div id="clock"></div>

然后，在CSS中定義該元素的樣式。我們將把它的寬度設置為 200px，高度設置為 60px，并將其背景顏色設置為黑色。

#clock {
width: 200px;
height: 60px;
background-color: black;
}

接下來，我們需要使用JavaScript來更新這個DIV中的文本內容。我們可以使用setInterval函數每秒鐘更新一次時間。例如：

function updateTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
// Add leading zeros to minutes and seconds
minutes = (minutes< 10 ? "0" : "") + minutes;
seconds = (seconds< 10 ? "0" : "") + seconds;
// Determine AM or PM suffix based on the hour
var suffix = (hours >= 12) ? "PM" : "AM";
hours = (hours >= 12) ? hours - 12 : hours;
// Convert hours component to 12-hour format
hours = (hours == 0) ? 12 : hours;
// Update the clock element
document.getElementById("clock").innerHTML =
hours + ":" + minutes + ":" + seconds + " " + suffix;
}
setInterval(updateTime, 1000);

這段代碼會在每隔1秒鐘內更新一次“clock”DIV的文本內容。 最后，我們可以在網頁上看到類似于下面的時間顯示：

<div id="clock">5:42:34 PM</div>

總結 CSS提供了一種簡單易用的方法來在網頁上顯示時間。通過結合JavaScript，我們可以很容易地更新這段文本內容，從而實現動態的時間顯示。希望本文可以對您有所幫助！