本文介绍如何使用 JavaScript 结合 CSS 样式实现一个简单的圆盘时钟。通过 HTML 构建时钟结构，CSS 设置圆盘与指针样式，JS 动态获取时间并旋转指针。代码包含刻度生成逻辑与定时器更新机制，适合前端初学者参考学习。
JavaScript 实现简单圆盘时钟
本文分享了一段使用 JavaScript 实现简易圆盘时钟的完整代码示例，供读者参考学习。
运行效果预览如下：
具体实现代码分为 CSS、HTML 和 JavaScript 三个部分，详细内容见下文。
CSS 样式定义
首先定义时钟的 CSS 样式，包括圆盘容器、指针轴心以及时针、分针和秒针的样式设置。
<style>
.disc {
position: relative;
margin: 200px auto;
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 50%;
}
.axis {
position: absolute;
top: 150px;
left: 150px;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}
.hourHand {
position: absolute;
top: 150px;
left: 147px;
width: 6px;
height: 80px;
background-color: #000;
transform-origin: 3px 0;
}
.minuteHand {
position: absolute;
top: 150px;
left: 148px;
width: 4px;
height: 110px;
background-color: #000;
transform-origin: 2px 0;
}
.secondHand {
position: absolute;
top: 150px;
left: 149px;
width: 2px;
height: 130px;
background-color: #000;
transform-origin: 1px 0;
}
.scale {
position: absolute;
top: 0;
left: 150px;
transform-origin: 2.5px 150px;
width: 2px;
height: 5px;
background-color: #000;
}
.num {
position: absolute;
top: 15px;
left: 150px;
width: 20px;
height: 20px;
color: 16px;
text-align: center;
line-height: 20px;
transform-origin: 50% 135px;
}
.num span {
display: block;
transform-origin: 50% 50%;
}
</style>HTML 结构构建
HTML 部分构建时钟的基本结构，包含圆盘容器及各个指针元素。
<div class="disc">
<div class="axis"></div>
<div class="hourHand"></div>
<div class="minuteHand"></div>
<div class="secondHand"></div>
</div>JavaScript 逻辑实现
JavaScript 代码负责获取页面元素，动态生成刻度，并通过定时器实时更新指针角度以显示当前时间。
// 获取元素
var disc = document.getElementsByClassName('disc')[0];
var hourHand = document.getElementsByClassName('hourHand')[0];
var minuteHand = document.getElementsByClassName('minuteHand')[0];
var secondHand = document.getElementsByClassName('secondHand')[0];
var scale = document.getElementsByClassName('scale');
// 生成刻度
for (var i = 0; i < 60; i++) {
var scale = document.createElement('div');
scale.classList.add('scale');
scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;
disc.appendChild(scale);
scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;
if (i % 5 === 0) {
scale.style.width = 4 + 'px';
scale.style.height = 12 + 'px';
}
}
// 生成数字
for (var i = 0; i < 12; i++) {
var num = document.createElement('div');
var numx = document.createElement('span');
num.classList.add('num');
num.style.transform = `translate(-50%) rotate(${i*30+30}deg)`;
numx.style.transform = `rotate(${-i*30-30}deg)`;
numx.innerHTML = i + 1;
disc.appendChild(num);
num.appendChild(numx);
}
// 浏览器刚打开就显示，不会停顿
var h = getTime().hours;
h = h > 12 ? h - 12 : h;
hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;
// 定时器，每过一秒执行一次
setInterval(function() {
var h = getTime().hours;
h = h > 12 ? h - 12 : h;
hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;
}, 1000)
// 函数：获取时间
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
month = month < 10 ? '0' + month : month;
var day = date.getDate();
day = day < 10 ? '0' + day : day;
var week = date.getDay();
var weeks = ['日', '一', '二', '三', '四', '五', '六'];
var weekZn = weeks[week];
var hou = date.getHours();
hou = hou < 10 ? '0' + hou : hou;
var min = date.getMinutes();
min = min < 10 ? '0' + min : min;
var sec = date.getSeconds();
sec = sec < 10 ? '0' + sec : sec;
return {
year: year,
month: month,
day: day,
week: weekZn,
hours: hou,
minute: min,
second: sec
}
}如需查看更多 JavaScript 时钟特效，可访问相关专题页面。
希望本示例能对读者有所帮助，欢迎继续支持本站获取更多技术内容。