JS实现电子时钟入门操作

来源：jb51　　时间：2022/6/20 8:40:25　　对本文有异议

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

代码呈上：

<!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]来读取元素的值。

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

2.date.getMonth()得到的是一个介于0到11之间的整数。

所以要执行 +1 操作才能显示正确的月份。

var month = date.getMonth()+1;

效果展示：

js不仅可以实现电子时钟，也可以实现带有表盘的时钟。

代码呈上：

<!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标签承载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;

效果展示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

友情链接：直通硅谷　点职佳　北美留学生论坛

JavaScript热门文章

echarts 饼图 + 全屏显示

js正则匹配以{开头,以}结尾的表达式怎么写？-附源码

echarts 实现数据(tooltip)自动轮播插件

Js设置博客园主题色(theme-color)

elementUI 设置input的只读或禁用的方法

超级好用的流程图js框架值得收藏

layui table+复杂表头+合并单元格

获取地理位置

如何使用JavaScript导入和导出Excel文件

WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

JavaScript推荐文章

一些八股：1.fetch 的理解。2.let、const、var

电子表格转身购物车：三步轻松实现

Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)

IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder

可视化—gojs 超多超实用经验分享(三)

PixiJS源码分析系列：第一章从最简单的例子入手

WebRTC入门

前端 Array.sort() 源码学习

【技巧】JS代码这么写，前端小姐姐都会爱上你

【JS】await异常捕获，这样做才完美