基于html+css+js实现动态时钟

参照B站的一个视频，利用html+css+js实现了动态时钟。
视频链接为: link

动态时钟的效果

基于HTML+css+js实现的动态时钟

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>clock</title><style type="text/css">*{/*外边距为0*/margin: 0;/*内边距为0*/pading: 0;/*规定一个带边框的框*/box-sizing: border-box;}/*将时钟固定在页面中间的弹性盒子，时钟大小多大，盒子就有多大*/body{/*固定时钟的长方形盒子为弹性布局*/display: flex;/*居中*/justify-content: center;/*交叉轴的中点对齐*/align-items: center;/*该块元素，高度如果小于100vh，那么这个块元素就不会再自动变小，而是保持100vh不变*//*vh指相对长度单位，view height*/min-height: 100vh;background: #091921;}/*放置时钟的正方形盒子*/.clock{/*时钟宽度*/width: 400px;/*时钟高度*/height: 400px;/*时钟盒子为弹性布局*/display: flex;/*盒子中的内容居中*/justify-content: center;/*交叉轴的中点对齐*/align-items: center;background: url("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(255,255,255,0.3);}/*时钟中心*//*在clock元素前插入中心*/.clock:before{content: '';/*与clock的位置有关*//*绝对定位的盒子，在没有规定left和top时，是相对于父元素的content左上角定位的，不包含padding*//*绝对定位与padding和父级相对定位的box-sizing有关*/position: absolute;width: 20px;height: 20px;background: #ffffff;border-radius: 50%;z-index: 10000;}.clock .hour,.clock .min,.clock .sec{position: absolute;}/*设置时针分针秒针的位置*/.clock .hour ,hr{width: 0;height: 0;}.clock .min ,mn{width: 0;height: 0;}.clock .sec ,sec{width: 0;height: 0;}.hr, .mn, .sc{display: flex;/*justify-content: flex-end;*/justify-content: center;/*align-items: center;*/position: absolute;border-radius: 50%;}.hr:before{content: '';position: absolute;width: 8px;height: 80px;background: #4169E1;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: 2px;height: 150px;background: #fff;z-index: 12;border-radius: 6px 6px 0 0;}</style><!--    <link rel="stylesheet" href="style.css">-->
</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 nor = 180;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)+177}deg)`;mn.style.transform = `rotateZ(${mm+nor}deg)`;sc.style.transform = `rotateZ(${ss+nor}deg)`;// hr.style.transform = rotateZ(+ hh + deg);// mn.style.transform = rotateZ(+ mm + deg);// sc.style.transform = rotateZ(+ ss + deg);})</script>
</body>
</html>

动态时钟背景图

基于html+css+js实现动态时钟相关推荐

基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
HTML+css+js萤火虫动态按钮
HTML+css+js萤火虫动态按钮(学习日志) 利用简单的代码写一个让人眼前一亮的效果,注意选暗一点的背景图片效果更加. <!DOCTYPE html> <html lang=&q ...
基于html+css+js+jquery的购物页面设计
1.jQuery介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码(框架)于2006年1月由John Resig发布.jQue ...
web期末大作业：基于html+css+js制作学校班级网页制作----校园运动会 4页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 ...
基于HTML+CSS+JS+JSP+Mysql的书城购书商城设计与实现文档+项目源码及数据库文件
资源下载地址:https://download.csdn.net/download/sheziqiong/85723200 资源下载地址:https://download.csdn.net/downl ...
基于HTML+CSS+JS制作商城（web前端网页制作课作业）--7古典乐器网 8页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 ...
基于HTML/CSS/JS的架子鼓，可以用键盘弹奏⌨️
基于HTML/CSS的架子鼓,您可以用键盘弹奏⌨️ 组装套件怎么玩? 进行声音检查下载 1.CSDN积分下载 2.关注公众号相关内容我已经制作了吉他,您可以在这里找到它: JavaScript
HTML+css+js实现网页时钟、全网做得最好的时钟！
这个时钟应该是全网做得最好的一个,原文的js部分没写注释,在学习的时候加上了注释,希望有助于理解~ html块代码 <!doctype html> <html> <hea ...

基于html+css+js实现动态时钟

基于html+css+js实现动态时钟相关推荐

最新文章

热门文章