纯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 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
javascript实现点亮灯泡特效示例
Oct 15 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
如何编写一个 Webpack Loader的实现
Oct 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正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
了解一点js的Eval函数
2012/07/26 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
使用JQuery实现的分页插件分享
2015/11/05 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
解决方案设计综合面试题
2015/08/31 面试题
2014年元旦感言
2014/03/06 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers