CSS+顯示當前時間

/* 定義需要顯示時間的區域的樣式 */
.time {
font-size: 24px;
color: #333;
margin: 20px 0;
text-align: center;
}
/* 設置時間顯示的格式 */
function getTime() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);
return hour + ":" + minute + ":" + second;
}
/* 對小時、分鐘、秒數進行補零處理 */
function checkTime(time) {
if (time< 10) {
time = "0" + time;
}
return time;
}
/* 使用JS控制時間的更新并顯示 */
setInterval(function () {
var nowTime = getTime();
document.getElementById('time').innerHTML = nowTime;
}, 1000);
/* HTML代碼 */
現在時間：

在CSS網頁設計中，顯示當前時間是一個比較有趣和實用的功能。使用CSS和JS可以輕松實現時間的顯示和更新。上述代碼可以使當前時間在網頁中以24小時制的格式實時展現。同時，我們可以通過修改樣式來控制時間的位置、字體、顏色等。總之，學習CSS和JS不僅能為我們的網頁增加更多的功能，還能使我們的網頁更加出色。