以下是一個基本的HTML時鐘實現代碼示例:
html
<!DOCTYPE html>
<html>
<head>
<title>時鐘</title>
<style>
.clock {
text-align: center;
font-size: 48px;
font-weight: bold;
}
</style>
<script>
function updateClock() {
var now = new Date();
var hour = addZeroPrefix(now.getHours());
var minute = addZeroPrefix(now.getMinutes());
var second = addZeroPrefix(now.getSeconds());
var timeString = hour + ":" + minute + ":" + second;
document.getElementById("clock").innerHTML = timeString;
setTimeout(updateClock, 1000); // 每秒鐘更新一次時鐘
}
function addZeroPrefix(num) {
return (num < 10 ? "0" : "") + num;
}
</script>
</head>
<body onload="updateClock()">
<div class="clock" id="clock"></div>
</body>
</html>
上述代碼中,我們定義了一個updateClock()
函數來更新時鐘,并在頁面加載完成時調用該函數。updateClock()
函數
獲取當前時間并將其顯示在具有"clock"
id的<div>
元素中。然后,我們使用setTimeout()
函數每秒鐘調用一次
updateClock()
函數,以便更新時鐘。
通過上述代碼,您可以在網頁上實現一個簡單的時鐘效果。您可以根據需要自定義CSS樣式以及時鐘顯示格式。