微客导航 » 文章资讯 » js+css3实现炫酷时钟

js+css3实现炫酷时钟

2023-07-18 14:46:04 288

本文实例为大家分享了js+css3实现炫酷时钟的具体代码，供大家参考，具体内容如下

html

css

(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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js+css3实现炫酷时钟

热门推荐

随机推荐