js+css3实现炫酷时钟
本文实例为大家分享了js+css3实现炫酷时钟的具体代码,供大家参考,具体内容如下
html
css
js
(function(){ varoUl=document.getElementById('box'); vartimer=null; for(vari=0,j=0;i<60;i++,j+=6){ varoLi=document.createElement('li'); oLi.style.transform='rotate('+j+'deg)'; if(i%5==0){ oLi.style.height='20px'; varoSpan=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){ varoH1=document.createElement('h1'); varoH2=document.createElement('h2'); varoH3=document.createElement('h3'); varoH4=document.createElement('h4'); oUl.appendChild(oH1); oUl.appendChild(oH2); oUl.appendChild(oH3); oUl.appendChild(oH4); } oUl.appendChild(oLi); } varoH=document.getElementsByTagName('h3')[0]; varoM=document.getElementsByTagName('h2')[0]; varoS=document.getElementsByTagName('h1')[0]; timer=setInterval(function(){ varnow=newDate(); vars=now.getSeconds(); varm=now.getMinutes()+s/60; varh=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); })();
作品截图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。