HTML5 時鐘是一種非常流行的網頁設計元素，它可以讓網站變得更加生動有趣，同時也可以增加網站的交互性。下面是 HTML5 時鐘的一些代碼示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 時鐘</title>
<meta charset="UTF-8">
<style>
#clock {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
}
#hours,
#minutes,
#seconds {
width: 2px;
height: 75px;
background-color: #333;
border-radius: 10px;
position: absolute;
transform-origin: bottom center;
}
#hours {
height: 50px;
}
#minutes {
height: 65px;
}
#seconds {
height: 75px;
}
</style>
</head>
<body>
<div id="clock">
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
<script>
function setClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourDeg = hours / 12 * 360 + (minutes / 60 * 30);
const minDeg = minutes / 60 * 360;
const secDeg = seconds / 60 * 360;
document.querySelector('#hours').style.transform = `rotate(${hourDeg}deg)`;
document.querySelector('#minutes').style.transform = `rotate(${minDeg}deg)`;
document.querySelector('#seconds').style.transform = `rotate(${secDeg}deg)`;
}
setInterval(setClock, 1000);
</script>
</body>
</html>上面的代碼使用 CSS 和 JavaScript 實現了一個簡單的 HTML5 時鐘，其中使用了 Flexbox 布局和絕對定位來實現指針的旋轉效果。在 JavaScript 中，使用了 Date 對象獲取當前時間并計算出指針的旋轉度數，然后通過設置元素的 transform 屬性來實現指針的旋轉動畫。可以根據需要對樣式進行自定義，添加動畫效果等。