js时钟
来源:互联网 发布:网络小游戏在线玩 编辑:程序博客网 时间:2024/05/13 08:21
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; list-style: none; } .box{ width: 200px; height: 200px; border: 1px solid #000; border-radius: 50%; margin: 100px auto; position: relative; } /*这是整个时钟圆盘*/ ul{ width: 200px; height: 200px; border-radius: 50%; background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/ } /*这是60个刻度样式*/ ul li{ width: 2px; height: 6px; background: #000; position: absolute; top: 0; left: 98px; -webkit-transform-origin: center 100px; } li:nth-of-type(5n){ height: 15px; } /*这是时钟的时针样式*/ .hour{ width: 3px; height: 70px; background: #000; position: absolute; top: 50px; left: 97px; -webkit-transform-origin: 1.5px 50px; } /*这是时钟的分针样式*/ .minute{ width: 2px; height: 80px; background: #000; position: absolute; top: 40px; left: 97.5px; -webkit-transform-origin: 1px 60px; } /*这是时钟的秒针样式*/ .second{ width: 1px; height: 90px; background: #000; position: absolute; top: 30px; left: 98px; -webkit-transform-origin: 0.5px 70px; } /* 这是整点的刻度点样式*/ span{ display: inline-block; width: 10px; height: 20px; position: relative; top: 15px; left:-15px; font-size: 18px; } </style> </head> <body> <div class="box"> <ul> <!--<li></li>--> </ul> <!-- 这是创建时钟的时针--> <div class="hour"></div> <!-- 这是创建时钟的分针--> <div class="minute"></div> <!-- 这是创建时钟的秒针--> <div class="second"></div> </div> </body> <script type="text/javascript"> var oUl=document.querySelector('ul');// 这是创建60个刻度点 for (var i=0;i<60;i++) {// 创建60个刻度的li节点 var li=document.createElement('li');// 这是整点添加数字 if(i%5==0){ var j=i/5; var oPs=document.createElement('span'); oPs.innerHTML=j; li.appendChild(oPs);// 添加12点 if( oPs.innerHTML==0){ oPs.innerHTML=12; }// 这是设置3 6 9 12等数字变为红色; if(j%3==0){ oPs.style.fontSize=24+'px'; oPs.style.color='red'; } }// 在ul里面添加60个li节点 oUl.appendChild(li); }// 获取到所有的li var aLi=document.querySelectorAll('li');// 把60个li以圆心依次旋转6度 for (var k=0;k<60;k++) { aLi[k].style.transform='rotate('+(k+1)*6+'deg)'; }// 获取到时针分针秒针 var hour=document.querySelector('.hour'); var second=document.querySelector('.second'); var minute=document.querySelector('.minute')// 这是一个定时器每隔一秒就启动time()这个函数; setInterval(time,1000); function time(){// 获取本地时间 var now=new Date(); var Second=now.getSeconds(); var Minute=now.getMinutes(); var Hour=now.getHours(); //把时针按照对应比例旋转(+Minute/60)加上一点分钟的时间时针就会时刻变化,不会显得突兀 hour.style.transform='rotate('+(Hour+Minute/60)*30+'deg)'; //把分针按照对应比例旋转+Minute/60加上一点秒钟的时间分针就会时刻变化,不会显得突兀 minute.style.transform='rotate('+(Minute+Second/60)*6+'deg)'; //把秒针按照对应比例旋转 second.style.transform='rotate('+(Second)*6+'deg)'; }// 最后自启这个函数不用等待一秒在启动,打开页面时钟就会动 time(); </script></html>
下面是效果图
阅读全文
0 0
- js 时钟
- JS时钟
- js时钟
- js时钟
- js时钟
- js时钟
- js时钟
- JS时钟
- JS 时钟
- js时钟
- JS时钟
- js液晶电子时钟
- js普通电子时钟
- js简单时钟
- js时钟代码发布
- js时钟倒计时
- js 简易 时钟
- js数字时钟
- 随机产生20个字符串并且字符串不能重复 且进行排序
- 认识债券
- ios开发之UI基础
- 资产抵押债券
- iOS 分享功能之图片压缩(微信好友-朋友圈)
- js时钟
- 四、集合之HashMap
- 问题解决-java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
- 使用 nvm 管理多版本 node
- ARM中的常用指令
- Docker入门那些事儿
- iOS图形编程的三种API
- 线程通信
- http中get与post的区别