js+css3实现炫酷时钟
程序员文章站
2023-02-16 23:41:03
本文实例为大家分享了js+css3实现炫酷时钟的具体代码,供大家参考,具体内容如下html
本文实例为大家分享了js+css3实现炫酷时钟的具体代码,供大家参考,具体内容如下
html
<body> <ul id='box'></ul> </body>
css
<style> *{ margin: 0; padding: 0; } body{ background-color: #aaa; } ul{ width: 400px; height: 400px; border: 5px solid skyblue; margin: 100px auto 0 auto; border-radius: 50%; background: radial-gradient(green 50%, yellow 100%);; position: relative; } ul li{ width: 2px; height: 15px; list-style: none; background-color: #fff; position: absolute; left: 199px; transform-origin: center 200px; } h1{ width: 2px; height: 180px; background-color: orange; position: absolute; left: 199px; top:20px; -transition: 1s linear; transform-origin: center 180px; } h2{ width: 6px; height: 160px; background-color: #fff; position: absolute; left: 197px; top:40px; transform-origin: center 160px; border-radius:20%; } h3{ width: 8px; height: 140px; background-color: #fff; position: absolute; left: 196px; top:60px; transform-origin: center 140px; transform: rotate(0deg); border-radius: 20%; } h4{ width: 30px; height: 30px; position: absolute; left: 185px; top:185px; border-radius: 50%; background-color: orange; } span{ display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 24px; position: absolute; left: -10px; top: 28px; color: #fff; } </style>
js
(function(){ var oul=document.getelementbyid('box'); var timer=null; for(var i=0,j=0;i<60;i++,j+=6){ var oli=document.createelement('li'); oli.style.transform='rotate('+j+'deg)'; if(i%5==0){ oli.style.height='20px'; var ospan=document.createelement('span'); ospan.style.transform='rotate('+(-j)+'deg)'; if(i==0){ ospan.innerhtml='12'; ospan.style.fontsize='30px'; ospan.style.left='-17px'; }else{ ospan.innerhtml=parseint(i/5); if(i%15==0){ ospan.style.fontsize='36px'; } } oli.appendchild(ospan); } if(i==0){ var oh1=document.createelement('h1'); var oh2=document.createelement('h2'); var oh3=document.createelement('h3'); var oh4=document.createelement('h4'); oul.appendchild(oh1); oul.appendchild(oh2); oul.appendchild(oh3); oul.appendchild(oh4); } oul.appendchild(oli); } var oh=document.getelementsbytagname('h3')[0]; var om=document.getelementsbytagname('h2')[0]; var os=document.getelementsbytagname('h1')[0]; timer=setinterval(function(){ var now = new date(); var s=now.getseconds(); var m=now.getminutes()+s/60; var h=now.gethours()+m/60; os.style.transform='rotate('+s*6+'deg)'; om.style.transform='rotate('+m*6+'deg)'; oh.style.transform='rotate('+(h%12)*30+'deg)'; },30); })();
作品截图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。