JS实现电子时钟入门操作 JS实现电子时钟入门操作

本文实例为大家分享了JS实现电子时钟入门操作的具体代码，供大家参考，具体内容如下
代码呈上：

Document - 锐客网h1{text-align: center; }

讲解要点：
1.getElementsByTagName返回的是类数组的集合
所以要用[0]来读取元素的值。

var h1 = document.getElementsByTagName("h1")[0]

2.date.getMonth()得到的是一个介于0到11之间的整数。
所以要执行 +1 操作才能显示正确的月份。

var month = date.getMonth()+1;

效果展示：

文章图片

js不仅可以实现电子时钟，也可以实现带有表盘的时钟。
代码呈上：

Document - 锐客网*{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; }1
2
3
4
5
6
7
8
9
10
11
12

讲解要点：
1.实现思路
表盘：首先用border-radius构造一个圆框，接着用12个p标签承载12个span标签并旋转p标签，由于旋转后，数字方向不正确，所以将span标签的类型改为块标签后，通过旋转改正各数字的方向。
表针：用三个矩形分别代表时针、分针和秒针，通过js函数实现他们在规定时间内旋转的角度。
2.行标签不支持旋转
所以要将span标签改为块标签后再使用旋转。