JS+CSS实现动态时钟


Posted in Javascript onFebruary 19, 2021

本文实例为大家分享了JS+CSS实现动态时钟的具体代码,供大家参考,具体内容如下

JS+CSS实现动态时钟

知识点总结:

document.querySelector()方法返回文档中匹配指定 CSS 选择器的一个元素。

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

HTML+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">
 <link rel="stylesheet" href="shiying.css" >
 <title>Document</title>
</head>

<body>
 <div class="clock">
 <div class="hour">
 <div class="hr" id="hr"></div>
 </div>
 <div class="min">
 <div class="mn" id="mn"></div>
 </div>
 <div class="sec">
 <div class="sc" id="sc"></div>
 </div>
 </div>
 <script type="text/javascript">
 const deg = 6;
 const hr = document.querySelector('#hr');
 const mn = document.querySelector('#mn');
 const sc = 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 = `rotateZ(${(hh) + (mm / 12)}deg)`;
 mn.style.transform = `rotateZ(${mm}deg)`;
 sc.style.transform = `rotateZ(${ss}deg)`;
 })

 </script>
</body>

</html>

CSS部分

*{
 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(1613462007944.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.05),
 inset 0 -15px 15px rgba(0,0,0, 0.05);
}
.clock:before
{
 content:"";
 position: absolute;
 width: 15px;
 height: 15px;
 background: #fff;
 border-radius: 50%;
 z-index:10000;

}
.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;
 position: absolute;
 border-radius: 50%;
}
.hr:before{
 content:"";
 position: absolute;
 width: 8px;
 height: 80px;
 background: #ff105e;
 z-index: 10;
 border-radius: 6px 6px 0 0;
}
.mn:before{
 content:"";
 position: absolute;
 width: 4px;
 height: 90px;
 background: #fff;
 z-index: 11;
 border-radius: 6px 6px 0 0;
}
.sc:before{
 content:"";
 position: absolute;
 width: 4px;
 height: 150px;
 background: #fff;
 z-index:12;
 border-radius: 6px 6px 0 0;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS字符串函数扩展代码
Sep 13 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 #Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 #Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
JavaScript实现手风琴效果
Feb 18 #Javascript
You might like
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python虚拟环境项目实例
2017/11/20 Python
Python打印输出数组中全部元素
2018/03/13 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Python pip使用超时问题解决方案
2020/08/03 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
Java程序员面试90题
2013/10/19 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
高中地理教学反思
2016/02/19 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Python各协议下socket黏包问题原理
2022/04/12 Python