纯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 相关文章推荐
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 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
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python 创建一维的0向量实例
2019/12/02 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
学校联谊活动方案
2014/02/15 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
个人授权委托书模板
2014/09/14 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
新员工考核评语
2014/12/31 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
与死神共舞观后感
2015/06/15 职场文书