HTML5時鐘是一種非常有趣的代碼，它可以讓我們在網頁上展示一個簡單的時鐘，為網頁帶來更好的視覺效果。今天我們來學習一下HTML5時鐘代碼如何編寫。首先，我們需要定義一個容器來放置時鐘，代碼如下：

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

接下來，我們需要編寫CSS樣式來定義時鐘的外觀，代碼如下：

#clock {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f2f2f2;
margin: 50px auto;
position: relative;
}
#clock::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 70px;
background-color: #333;
transform-origin: bottom;
transform: translate(-50%, -100%);
}
#clock::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

接下來，我們需要編寫JavaScript代碼來讓時鐘動起來。代碼如下：

function clock() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var hourHand = document.querySelector('#clock::before');
var minuteHand = document.querySelector('#clock::after');
var hourAngle = (hours % 12 + minutes / 60 + seconds / 3600) * 30;
hourHand.style.transform = 'rotate(' + hourAngle + 'deg)';
var minuteAngle = (minutes + seconds / 60) * 6;
minuteHand.style.transform = 'rotate(' + minuteAngle + 'deg)';
}
setInterval(clock, 1000);

通過以上代碼的編寫，我們就可以在網頁上展示一個簡單的時鐘了。如果您想要更進一步的學習，我們推薦您參考菜鳥教程提供的HTML5時鐘代碼，這里還有更多有趣的HTML5代碼，讓您的網頁更加生動和有趣。