以下是一个使用纯JavaScript创建HTML圆盘仪表的示例代码。这个示例提供了一个简单的圆盘仪表，可以显示时间，并且会随着时间的变化更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Clock</title>
<style>
.clock {
width: 300px;
height: 300px;
position: relative;
margin: 50px auto;
border: 10px solid #333;
border-radius: 50%;
background-color: #f0f0f0;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}
.clock .plate {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 50%;
background-color: #444;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}
.clock .dial {
width: 80%;
height: 80%;
position: absolute;
top: 10%;
left: 10%;
z-index: 2;
border-radius: 50%;
background-color: #f0f0f0;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}
.hand {
width: 2px;
height: 100px;
position: absolute;
top: 50%;
transform-origin: 50% -100px;
transition: all 0.05s;
z-index: 3;
}
.hand.hour {
background: #333;
}
.hand.minute {
background: #f00;
}
.hand.second {
background: #ff0;
}
</style>
</head>
<body>
<div class="clock">
<div class="plate"></div>
<div class="dial"></div>
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
</div>
<script>
function rotateElement(element, angle) {
element.style.transform = 'rotate(' + angle + 'deg)';
}
function updateClock() {
var now = new Date();
var seconds = now.getSeconds();
var minutes = now.getMinutes() + seconds / 60;
var hours = (now.getHours() % 12) + minutes / 60;
rotateElement(secondHand, seconds * 6);
rotateElement(minuteHand, minutes * 6);
rotateElement(hourHand, hours * 30);
}
var secondHand = document.querySelector('.hand.second');
var minuteHand = document.querySelector('.hand.minute');
var hourHand = document.querySelector('.hand.hour');
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
这段代码提供了一个简单的圆盘仪表，通过CSS给它添加样式，并通过JavaScript更新指针的位置以模拟时间的流逝。这个示例可以作为创建自己时钟应用的基础，并且可以根据需要进行扩展和定制。