HTML5時(shí)鐘是一種常見(jiàn)的 UI 元素，它可以在網(wǎng)頁(yè)上顯示當(dāng)前的時(shí)間。在 HTML5 中，我們可以使用canvas元素和 JavaScript 創(chuàng)建一個(gè)時(shí)鐘。以下是一個(gè) HTML5 時(shí)鐘實(shí)例的代碼。

// 獲取 canvas 元素和 2D 上下文
var canvas = document.getElementById('clock');
var context = canvas.getContext('2d');
// 定義時(shí)鐘的中心和半徑
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = canvas.width / 2 - 10;
// 畫時(shí)鐘的外框
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
context.lineWidth = 10;
context.strokeStyle = '#fff';
context.stroke();
// 畫時(shí)鐘的刻度線
for (var i = 0; i< 12; i++) {
var angle = i * (Math.PI / 6);
var x = centerX + (radius - 30) * Math.cos(angle);
var y = centerY + (radius - 30) * Math.sin(angle);
context.beginPath();
context.arc(x, y, 5, 0, 2 * Math.PI);
context.fillStyle = '#fff';
context.fill();
}
// 畫時(shí)鐘的指針
function drawHand(angle, length, width, color) {
context.beginPath();
context.moveTo(centerX, centerY);
var x = centerX + length * Math.cos(angle - (Math.PI / 2));
var y = centerY + length * Math.sin(angle - (Math.PI / 2));
context.lineTo(x, y);
context.lineWidth = width;
context.strokeStyle = color;
context.stroke();
}
// 畫時(shí)鐘的小時(shí)指針
var date = new Date();
var hours = date.getHours();
hours = hours >12 ? hours - 12 : hours;
var hoursAngle = (hours * Math.PI / 6) + (date.getMinutes() * Math.PI / 360);
drawHand(hoursAngle, radius / 2, 10, '#fff');
// 畫時(shí)鐘的分鐘指針
var minutes = date.getMinutes();
var minutesAngle = (minutes * Math.PI / 30) + (date.getSeconds() * Math.PI / 1800);
drawHand(minutesAngle, radius * 0.7, 5, '#fff');
// 畫時(shí)鐘的秒鐘指針
var seconds = date.getSeconds();
var secondsAngle = (seconds * Math.PI / 30);
drawHand(secondsAngle, radius * 0.9, 2, '#ff0000');
// 更新時(shí)鐘的時(shí)間
function updateClock() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawHand(hoursAngle, radius / 2, 10, '#fff');
drawHand(minutesAngle, radius * 0.7, 5, '#fff');
secondsAngle += (Math.PI / 30);
drawHand(secondsAngle, radius * 0.9, 2, '#ff0000');
}
setInterval(updateClock, 1000);

以上代碼通過(guò)canvas元素和 JavaScript 實(shí)現(xiàn)了一個(gè)基本的 HTML5 時(shí)鐘實(shí)例。我們可以通過(guò)修改顏色、字體、樣式等參數(shù)可以自定義時(shí)鐘的外觀。值得注意的是，這個(gè)時(shí)鐘不十分準(zhǔn)確，因?yàn)樗褂玫氖?JavaScript 的定時(shí)器，而 JavaScript 的定時(shí)器依賴于瀏覽器的刷新率，因此可能會(huì)有一些誤差。