前端|创建简单动态时钟
时间:2022-07-23
本文章向大家介绍前端|创建简单动态时钟,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
介绍
动态时钟,就是通过CSS工具的美化效果和引入JavaScript,让网页呈现出钟表的动态效果,让它能够记录时间。通过改变背景颜色、指针颜色和阴影效果,让时钟呈现不同的颜色。
思路解析
制作动态时钟时,要注意以下细节:
(1)使用box-shadow标签来设置时钟的轮廓和阴影。
(2)用JS获取每个指针和它的时间,用到const限定符和querySelector方法。
制作过程
(1)创建一个主容器class="clock"的时钟,为每个指针命名。
<div><!--时钟-->
<div> <!--时针-->
<div id="hr"></div>
</div>
<div> <!--分针-->
<div id="mn"></div>
</div>
<div> <!--秒针-->
<div id="sc"></div>
</div>
</div>
(2)用CSS为时钟布置背景,在.clock使用Flex布局方式,并且让它水平、垂直方向都居中;引入时钟的背景图片,用background-size: cover把背景图片放大到适合容器的尺寸,让图片比例不变。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #091921;
}
.clock{
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background: url(img/clock.png);
background-size: cover;
border: 4px solid #091921;
border-radius: 50%;
.clock{
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background: url(img/clock.png);
background-size: cover;
border: 4px solid #091921;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255,255,255,0.05),/*时钟上半部分外发光*/
inset 0 -15px 15px rgba(255,255,255,0.05),/*时钟下半部分内发光*/
0 15px 15px rgba(0,0,0,0.3),/*时钟下半部分外阴影*/
inset 0 15px 15px rgba(0,0,0,0.3);/*时钟上半部分内阴影*/
}
(3)使用 CSS3 中的 ":before" 伪元素为时钟添加实心小圆点,方便指针确认中心点。
.clock:before{
content: ''; /*必须存在,使伪元素显示*/
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
z-index: 10000;/*使实心小圆点在视图的最上层,遮挡住指针交叉的部分*/
}
(4)为不同指针添加宽高和颜色。
.clock .hour,.clock .min,.clock .sec{
position: absolute;
}
.clock .hour, .hr{
width: 160px;
height: 160px;
}
.clock .min, .mn{
width: 190px;
height: 190px;
}
.clock .sec, .sc{
width: 230px;
height: 230px;
}
.hr .mn .sc{
display: flex;
justify-content: center;
/*align-items: center;*/
position: absolute;
border-radius: 50%;
}
.hr:before{
content: '';
position: absolute;
width: 8px;
height: 80px;
background: orangered;
z-index: 10;
border-radius: 6px 6px 0 0;
margin-left: 76px;
}
.mn:before{
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #fff;
z-index: 11;
border-radius: 6px 6px 0 0;
margin-left: 93px;
}
.sc:before{
content: '';
position: absolute;
width: 2px;
height: 150px;
background: red;
z-index: 11;
border-radius: 6px 6px 0 0;
margin-left: 114px;
}
图1
(5)用JS获取到当前的时间,分别计算每个指针应该旋转的角度。其中,deg代表:度(一个圆 360 度)。
const deg = 6; /*获取每个指针*/
const hr = document.querySelector("#hr");
const mm = document.querySelector("#mn");
const ss = document.querySelector("#sc");
setInterval(() => {
let day = new Date(); /*获取当前时间*/
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = 'rotate('+(hh+mm/12)+'deg)'; /*计算每个指针应旋转的角度*/
mn.style.transform = 'rotate('+mm+'deg)';
sc.style.transform = 'rotate('+ss+'deg)';
})
效果图:
图2
END
- [编程经验] Tensorflow中的共享变量机制小结
- 洛谷 P1313 计算系数
- 一文搞懂浏览器自动化测试框架selenium!
- 三分钟Python充电-解压序列赋值给多个变量
- 三分钟Python充电-解压可迭代对象赋值给多个变量
- [编程经验] Pandas入门(一)
- Day3上午解题报告
- [编程经验] Pandas入门(二)
- [编程经验] Python 字符串的几种判断方法
- Day3下午解题报告
- 哇,原来python字符串是这样的!
- [编程经验] TensorFlow实现非线性支持向量机
- 这或许是我见过的最简单的正则表达式教程(三)
- Linux下搭建ZooKeeper集群并整合Dubbo配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 帝都房价回调?带你用Python了解北京二手房市场现状
- Zabbix 利用 ncat 监控远端端口状态
- MySQL“被动”性能优化汇总!
- H3C WA2610i-GN 无线AP FAT 配置案例
- java强引用、软引用、弱引用、虚引用以及FinalReference
- 读源码——JDK动态代理
- 图解红黑树
- 算法——递归
- LeetCode 94 | 基础题,如何不用递归中序遍历二叉树?
- 读源码——cglib动态代理
- 每日一题 | 字符串转换问题
- Git同时上传到github和码云(国内知名的男性交友网站)
- 读源码——Guava-Cache
- LeetCode 94 | 构造出所有二叉搜索树
- 每日一题 | 最大考试分数问题