HTML5是一種用于網頁制作的語言，它支持各種新的元素和功能，比如視頻、音頻和畫布。而今天我們要探討的是如何使用HTML5來制作一個時鐘。
<!DOCTYPE html>
<html>
<head>
<title>HTML5時鐘</title>
<style>
#clock {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border-radius: 50%;
position: relative;
}
#hour-hand, #minute-hand, #second-hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
background-color: black;
}
#hour-hand {
width: 6px;
height: 50px;
margin-left: -3px;
}
#minute-hand {
width: 4px;
height: 80px;
margin-left: -2px;
}
#second-hand {
width: 2px;
height: 100px;
margin-left: -1px;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour-hand"></div>
<div id="minute-hand"></div>
<div id="second-hand"></div>
</div>
<script>
function updateClock() {
var now = new Date();
var second = now.getSeconds();
var minute = now.getMinutes();
var hour = now.getHours();
// 將時鐘指針旋轉到正確的角度
var secondDegrees = second * 6;
var minuteDegrees = (minute * 6) + (second / 10);
var hourDegrees = (hour * 30) + (minute / 2);
document.getElementById("second-hand").style.transform = "rotate(" + secondDegrees + "deg)";
document.getElementById("minute-hand").style.transform = "rotate(" + minuteDegrees + "deg)";
document.getElementById("hour-hand").style.transform = "rotate(" + hourDegrees + "deg)";
}
// 更新時鐘
setInterval(updateClock, 1000);
</script>
</body>
</html>代碼中首先定義了一個圓形的時鐘盤，它的寬度和高度都是200像素，并且中間有三個指針。指針被定義成三個絕對定位的div元素，并通過CSS樣式設置它們的顏色和大小。其中，transform-origin屬性用于指定指針的旋轉中心點。
在JavaScript代碼中，我們定義了一個名為updateClock的函數，它在每秒鐘被調用一次。在這個函數中，我們使用Date對象來獲取當前的秒數、分鐘數和小時數，并將它們轉換成相應的角度。然后通過設置CSS的transform屬性來旋轉指針，從而實現時鐘的動態效果。
最后，在頁面加載完成后，我們調用setInterval函數來啟動時鐘更新功能。該函數會以每秒鐘的間隔執行updateClock函數，從而讓時鐘保持實時的狀態。
上一篇html5制作網頁的代碼
下一篇不同頁面的css不覆蓋