html5
html5教程-transform实现的时钟效果
发布时间：2018-12-18 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-transform实现的时钟效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
transform实现的时钟效果
transform实现的时钟效果 又来一个时钟效果了，这个的实现不需要canvas，都是p、ul、li画出的，好玩有真实。
哈哈~
需要的js才能实现到走动这个效果，但js的内容不多，也不难。
主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和圆心接触的吗，那么设置时针的底部为旋转点不就OK了，大概的说了说思路。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform</title> <style id="css"> #clock{ width: 200px; height: 200px; border: 2px solid #000; border-radius: 50%; margin: 100px auto 0; position: relative; } #clock ul{ width: 200px; height: 200px; position: relative; list-style: none; padding:0; margin: 0; } #clock ul li{ width: 2px; height: 10px; background: #000; transform-origin: center 100px; position: absolute; top: 0; left: 50%; } #clock ul li:nth-of-type(5n+1){ height: 20px; } #hour{ height: 40px; width: 4px; background: #00fefe; position: absolute; top: 60px; left: 99px; transform-origin:center bottom; } #min{ height: 60px; width: 3px; background: #001afe; position: absolute; top: 40px; left: 99px; transform-origin: center bottom; transform: rotate(15deg); } #sec{ height: 70px; width: 2px; background: #000; position: absolute; top: 30px; left: 99px; transform-origin:center bottom; } #dot{ width: 10px; height: 10px; position: absolute; left: 95px; top: 95px; background: #aaa; border-radius: 50%; } </style> </head> <body> <p id="clock"> <ul></ul> <p id="hour"></p> <p id="min"></p> <p id="sec"></p> <p id="dot"></p> </p> <script> var oCss=document.getElementById("css"); var oClock=document.getElementById("clock"); var oUl=oClock.getElementsByTagName("ul")[0]; var oHour=document.getElementById("hour"); var oMin=document.getElementById("min"); var oSec=document.getElementById("sec"); var strLi=""; var strCss=""; for(var i=0;i<60;i++){ strLi+="<li></li>"; } oUl.innerHTML=strLi; for(var i=0;i<60;i++){ strCss+=‘#clock ul li:nth-of-type(‘+(i+1)+‘){transform:rotate(‘+i*6+‘deg);}‘; } oCss.innerHTML+=strCss; time(); setInterval(time,1000); function time(){ var date=new Date(); var h=date.getHours(); var m=date.getMinutes(); var s=date.getSeconds(); oHour.style.transform="rotate("+(h+m/60)*30+"deg)"; oMin.style.transform="rotate("+(m+s/60)*6+"deg)"; oSec.style.transform="rotate("+s*6+"deg)"; } </script> </body> </html> 使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以
使用innerHTML为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1
秒执行一次函数，这样它就是动起来了。
又来一个时钟效果了，这个的实现不需要canvas，都是p、ul、li画出的，好玩有真实。
哈哈~
需要的js才能实现到走动这个效果，但js的内容不多，也不难。
主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和圆心接触的吗，那么设置时针的底部为旋转点不就OK了，大概的说了说思路。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform</title> <style id="css"> #clock{ width: 200px; height: 200px; border: 2px solid #000; border-radius: 50%; margin: 100px auto 0; position: relative; } #clock ul{ width: 200px; height: 200px; position: relative; list-style: none; padding:0; margin: 0; } #clock ul li{ width: 2px; height: 10px; background: #000; transform-origin: center 100px; position: absolute; top: 0; left: 50%; } #clock ul li:nth-of-type(5n+1){ height: 20px; } #hour{ height: 40px; width: 4px; background: #00fefe; position: absolute; top: 60px; left: 99px; transform-origin:center bottom; } #min{ height: 60px; width: 3px; background: #001afe; position: absolute; top: 40px; left: 99px; transform-origin: center bottom; transform: rotate(15deg); } #sec{ height: 70px; width: 2px; background: #000; position: absolute; top: 30px; left: 99px; transform-origin:center bottom; } #dot{ width: 10px; height: 10px; position: absolute; left: 95px; top: 95px; background: #aaa; border-radius: 50%; } </style> </head> <body> <p id="clock"> <ul></ul> <p id="hour"></p> <p id="min"></p> <p id="sec"></p> <p id="dot"></p> </p> <script> var oCss=document.getElementById("css"); var oClock=document.getElementById("clock"); var oUl=oClock.getElementsByTagName("ul")[0]; var oHour=document.getElementById("hour"); var oMin=document.getElementById("min"); var oSec=document.getElementById("sec"); var strLi=""; var strCss=""; for(var i=0;i<60;i++){ strLi+="<li></li>"; } oUl.innerHTML=strLi; for(var i=0;i<60;i++){ strCss+=‘#clock ul li:nth-of-type(‘+(i+1)+‘){transform:rotate(‘+i*6+‘deg);}‘; } oCss.innerHTML+=strCss; time(); setInterval(time,1000); function time(){ var date=new Date(); var h=date.getHours(); var m=date.getMinutes(); var s=date.getSeconds(); oHour.style.transform="rotate("+(h+m/60)*30+"deg)"; oMin.style.transform="rotate("+(m+s/60)*6+"deg)"; oSec.style.transform="rotate("+s*6+"deg)"; } </script> </body> </html> 使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以
使用innerHTML为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1
秒执行一次函数，这样它就是动起来了。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-transform实现的时钟效果全部内容，希望文章能够帮你解决html5教程-transform实现的时钟效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的html5相关文章
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程