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 相关文章推荐
Javascript remove 自定义数组删除方法
Oct 20 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
解析Vue.js中的组件
Feb 02 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
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显示MySQL数据的三种方法
2008/06/05 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python合并文本文件示例
2014/02/07 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python 队列详解及实例代码
2016/10/18 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
日语专业个人求职信范文
2014/02/02 职场文书
化学教学随笔感言
2014/02/19 职场文书
十周年庆典策划方案
2014/06/03 职场文书
校长四风对照检查材料
2014/09/27 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2015年党建工作总结
2015/03/30 职场文书
门店店长岗位职责
2015/04/14 职场文书
创卫工作总结2015
2015/04/22 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书