標簽可用于展示其代碼。

<div id="clock"></div>
#clock{
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #000;
position: relative;
margin: 50px auto;
}
#clock:before{
content: "";
width: 14px;
height: 14px;
background-color: #000;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
}
.hour, .minute, .second{
width: 50%;
height: 2px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform-origin: left center;
transform: rotate(90deg);
}
.hour{
height: 6px;
margin-top: -3px;
}
.minute{
height: 4px;
margin-top: -2px;
}
.second{
height: 2px;
margin-top: -1px;
}
.hour-hand{
transform: rotate(180deg);
}
.minute-hand{
transform: rotate(90deg);
}
.second-hand{
transform: rotate(270deg);
}

這是一個基礎的電子鐘CSS樣式，其中包括了一個圓形的時鐘表盤和三個指針，分別指向小時、分鐘和秒鐘。整個時鐘是基于CSS繪制的，不依賴于任何JavaScript庫。

為了使時鐘更準確，我們需要JavaScript來更新指針的位置。我們可以通過在JavaScript中獲取當前本地時間，并動態調整指針的角度來完成這個任務。

function updateClock(){
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var hourHand = document.querySelector(".hour-hand");
var minuteHand = document.querySelector(".minute-hand");
var secondHand = document.querySelector(".second-hand");
var hourAngle = (hour % 12) * 30 + minute / 2;
var minuteAngle = minute * 6;
var secondAngle = second * 6;
hourHand.style.transform = "rotate(" + hourAngle + "deg)";
minuteHand.style.transform = "rotate(" + minuteAngle + "deg)";
secondHand.style.transform = "rotate(" + secondAngle + "deg)";
setTimeout(updateClock, 1000);
}
updateClock();

這是JavaScript代碼用于更新指針位置。它使用了setInterval函數來更新指針的角度，以秒為單位。

在HTML中只需要添加一個空的