纯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 模拟气泡屏保效果代码
Jul 10 Javascript
js中有关IE版本检测
Jan 04 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
微信小程序实现选项卡效果
Nov 06 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
克隆一个新项目的快捷方式
2013/04/10 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python字符串转换成浮点数函数分享
2015/07/24 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
房产转让协议书
2014/04/11 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
导游词300字
2015/02/13 职场文书
爱心募捐通知范文
2015/04/27 职场文书