2022-06-20 06:04:49 来源 : 软件开发网
本文实例为大家分享了JS实现电子时钟入门操作的具体代码，供大家参考，具体内容如下
(相关资料图)
代码呈上：
Document <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>讲解要点：
1.getElementsByTagName返回的是类数组的集合
所以要用[0]来读取元素的值。
var h1 = document.getElementsByTagName("h1")[0] 2.date.getMonth()得到的是一个介于0到11之间的整数。
所以要执行 +1 操作才能显示正确的月份。
var month = date.getMonth()+1;效果展示：
js不仅可以实现电子时钟，也可以实现带有表盘的时钟。
代码呈上：
Document 1
2
3
4
5
6
7
8
9
10
11
12
<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讲解要点：
1.实现思路
表盘：首先用border-radius构造一个圆框，接着用12个p标签承载12个span标签并旋转p标签，由于旋转后，数字方向不正确，所以将span标签的类型改为块标签后，通过旋转改正各数字的方向。
表针：用三个矩形分别代表时针、分针和秒针，通过js函数实现他们在规定时间内旋转的角度。
2.行标签不支持旋转
所以要将span标签改为块标签后再使用旋转。
.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;效果展示：
关于我们 加入我们 广告服务 网站地图
All Rights Reserved, Copyright 2004-2020 www.830036.com
如有意见请与我们联系 邮箱：435 227 67@qq.com
营业执照公示信息