JavaScript 电子时钟与表盘时钟实现详解
本文通过两个实例讲解JavaScript实现时钟的方法。首先介绍使用getElementsByTagName获取元素并更新文本的电子时钟，需注意月份需加1。随后深入解析带有表盘的时钟，涵盖利用CSS构造圆形表盘、处理行内元素旋转问题以及计算时针分针角度的逻辑，帮助开发者掌握前端动态效果实现技巧。
JavaScript 电子时钟实现
本文分享了使用JavaScript实现电子时钟的具体代码示例，供读者参考学习。
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<h1></h1>
</body>
<script>
var h1 = document.getElementsByTagName("h1")[0]
function setH1(){
//获取时间戳
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var riqi = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
//拼接成指定格式
// var str = year + "/" + month + "/" + riqi + "/" + " " + hour + ":" + minute + ":" + second
var str = `${year}/${month}/${riqi} ${hour}:${minute}:${second}`
//通过innerHTML对标签的内容进行获取或修改
h1.innerHTML= str;
}
//函数的执行
setH1();
var timer = setInterval(function(){
setH1();
},1000)//每间隔1000毫秒（即1秒钟），执行一次函数function
</script>
</html>代码实现的关键点如下：
1. getElementsByTagName方法返回的是一个类数组对象集合。
因此，需要通过索引[0]来访问并获取具体的DOM元素值。
var h1 = document.getElementsByTagName("h1")[0] 2. Date对象的getMonth()方法返回的数值范围是0到11。
为了显示正确的月份，必须在获取结果后执行加1操作。
var month = date.getMonth()+1;运行效果如下：
表盘时钟实现原理
JavaScript不仅可用于制作简单的电子时钟，还能实现带有复杂表盘的时钟效果。
相关代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
.clock{
width: 200px;
height: 200px;
border: 10px solid lightskyblue;
border-radius: 50%;
margin: 0 auto;
box-shadow: 5px 5px 5px lightgray;
background-color: #fff;
position: relative;
}
.clock p{
width: 200px;
height: 20px;
/* background-color: aquamarine; */
line-height: 20px;
position: absolute;
top: 90px;
}
.clock p span{
display: block; /* 不改成块标签不支持旋转 */
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
/* background-color: brown; */
}
#hour {
position: absolute;
transform-origin: center bottom;
width: 6px;
height: 50px;
background-color: tomato;
left: 97px;
top: 50px;
}
#minute {
position: absolute;
transform-origin: center bottom;
width: 4px;
height: 70px;
background-color: deepskyblue;
left: 98px;
top: 30px;
}
#second {
position: absolute;
transform-origin: center bottom;
width: 2px;
height: 90px;
background-color: hotpink;
left: 99px;
top: 10px;
}
</style>
</head>
<body>
<div class="clock">
<p><span>1</span></p>
<p><span>2</span></p>
<p><span>3</span></p>
<p><span>4</span></p>
<p><span>5</span></p>
<p><span>6</span></p>
<p><span>7</span></p>
<p><span>8</span></p>
<p><span>9</span></p>
<p><span>10</span></p>
<p><span>11</span></p>
<p><span>12</span></p>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</body>
<script>
//获取数字
var ps = document.getElementsByTagName("p");
//获取三个表针
var dHour = document.getElementById("hour");
var dMinute = document.getElementById("minute");
var dSecond = document.getElementById("second");
//设置定时器
var timer = null;
//设置数字的位置
function setNums(){
for (var i=0;i<ps.length; i++){
ps[i].style.transform = `rotate(${120 + i*30}deg)`;
//获取p下边的span标签}
var span = ps[i].getElementsByTagName("span")[0];
span.style.transform = `rotate(${((120 + i*30)*-1)}deg`;
}
}
setNums();
//开启定时器
// timer = setInterval(function(){},1000) 每1000毫秒执行一次function（）
timer = setInterval(function(){
changeZhen();
},1000)
//获取时间戳
function changeZhen(){
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes() + s/60;
var h = date.getHours() + m/60;
dSecond.style.transform = `rotate(${s * 6}deg)`;
dMinute.style.transform = `rotate(${m * 6}deg)`;
dHour.style.transform = `rotate(${h * 30}deg)`;
}
</script>
</html>表盘时钟的实现要点包括：
1. 实现思路概述
表盘部分：首先利用border-radius属性绘制圆形边框，随后使用12个p标签分别承载数字（span标签）。由于直接旋转p标签会导致数字方向颠倒，需将span标签转换为块级元素，并通过反向旋转修正各数字的显示方向。
表针部分：分别使用三个矩形元素代表时针、分针和秒针，通过JavaScript函数计算并设置它们在指定时间内的旋转角度。
2. 行内元素旋转限制
由于行内标签（span）默认不支持transform旋转属性，必须先将span标签的display属性设置为block（块级），才能应用旋转效果。
.clock p span{
display: block; /* 不改成块标签不支持旋转 */
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
/* background-color: brown; */
}3. 非整点时间的指针位置处理
除整点外，分针和时针并非精确指向刻度，需进行线性插值计算。具体操作如下：
var m = date.getMinutes() + s/60;
var h = date.getHours() + m/60;4. 设置旋转中心点
transform-origin: center bottom;运行效果展示：
以上内容为本文的全部讲解，希望能对读者有所帮助，欢迎继续支持本站。
怎么在iframe中独立重新加载JS脚本
2026-11-05 18:19:37
JS怎么使用classList添加、删除和切换class
2026-11-05 17:26:02
网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象：自动序列化与反序列化技巧
2026-11-05 12:36:26