纯js+css实现在线时钟


Posted in Javascript onAugust 18, 2020

本文实例为大家分享了js+css实现在线时钟的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>时钟</title>
 <style type="text/css">
 *{
 padding: 0;
 margin: 0;
 }
 .wrap{
 position: absolute;
 width: 200px;
 height: 200px;
 border: 2px solid;
 background-color: pink;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 }
 .wrap>ul{
 list-style: none;
 }
 .wrap>ul>li{
 position: absolute;
 left: 99px;
 top: 0;
 width: 2px;
 height: 10px;
 background-color: black;
 transform-origin: center 100px;
 }
 .wrap>ul>li:nth-child(5n+1){
 height: 15px;
 }
 .wrap > .hour{
 position: absolute;
 left: 97px;
 top:70px ;
 width: 6px;
 height: 30px;
 background: black;
 transform-origin: center bottom;
 }
 .wrap > .min{
 position: absolute;
 left: 98px;
 top: 50px;
 width: 4px;
 height: 50px;
 background: gray;
 transform-origin: center bottom;
 }
 .wrap > .sec{
 position: absolute;
 left: 99px;
 top: 30px;
 width: 2px;
 height: 70px;
 background: red;
 transform-origin: center bottom;
 }
 .wrap > .center{
 position: absolute;
 left: 90px;
 top: 90px;
 width: 20px;
 height: 20px;
 border-radius:50% ;
 background: black;
 }
 </style>
 </head>
 <body>
 <div class="wrap">
 <ul></ul>
 <div class="hour"></div>
 <div class="min"></div>
 <div class="sec"></div>
 <div class="center"></div>
 </div>
 </body>
 <script type="text/javascript">
 window.onload =function(){
 var hourNode =document.querySelector(".wrap > .hour");
 var minNode =document.querySelector(".wrap > .min");
 var secNode =document.querySelector(".wrap > .sec");
 var ulNode =document.querySelector(".wrap>ul");
 var styleNode =document.createElement('style');
 var liHtml ='';
 var styleHtml ='';
 for(var i=0;i<60;i++){
 liHtml += "<li></li>";
 styleHtml+=".wrap>ul>li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}"
 }
 ulNode.innerHTML =liHtml;
 styleNode.innerHTML =styleHtml;
 document.querySelector('head').appendChild(styleNode);
 
 moveTime();
 setInterval(moveTime,1000);
 
 function moveTime(){
 var date =new Date();
 var sec =date.getSeconds();
 var min =date.getMinutes()+sec/60;
 var hour =date.getHours()+min/60;
 hourNode.style.transform ="rotate("+(hour*30)+"deg)";
 minNode.style.transform ="rotate("+(min*6)+"deg)";
 secNode.style.transform ="rotate("+(sec*6)+"deg)";
 }
 
 }
 </script>
</html>

纯js+css实现在线时钟

实现要点

1、transform-origin的基本点的应用
2、批量处理html和样式的信息
3、指证位置进行了优化(时针与小时和分针位置有关,分针与分和秒针位置有关)。

新增居中方式:

开启绝对定位 left:50%;top :50%;transform:translate(50%,50%);

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

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

Javascript 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 #Javascript
js+css实现扇形导航效果
Aug 18 #Javascript
js实现3D旋转效果
Aug 18 #Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 #Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 #Javascript
javascript实现移动端上传图片功能
Aug 18 #Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 #Javascript
You might like
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php数据库抽象层 PDO
2011/05/07 PHP
解析php入库和出库
2013/06/25 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
简单的通用表达式求10乘阶示例
2014/03/03 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
公司培训欢迎词
2014/01/10 职场文书
小学教师事迹材料
2014/01/13 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle