好资源导航 » 文章资讯 » 纯js+css实现在线时钟

纯js+css实现在线时钟

2023-07-18 14:50:05 154

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





时钟

*{
padding:0;
margin:0;
}
.wrap{
position:absolute;
width:200px;
height:200px;
border:2pxsolid;
background-color:pink;
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.wrap>ul{
list-style:none;
}
.wrap>ul>li{
position:absolute;
left:99px;
top:0;
width:2px;
height:10px;
background-color:black;
transform-origin:center100px;
}
.wrap>ul>li:nth-child(5n+1){
height:15px;
}
.wrap>.hour{
position:absolute;
left:97px;
top:70px;
width:6px;
height:30px;
background:black;
transform-origin:centerbottom;
}
.wrap>.min{
position:absolute;
left:98px;
top:50px;
width:4px;
height:50px;
background:gray;
transform-origin:centerbottom;
}
.wrap>.sec{
position:absolute;
left:99px;
top:30px;
width:2px;
height:70px;
background:red;
transform-origin:centerbottom;
}
.wrap>.center{
position:absolute;
left:90px;
top:90px;
width:20px;
height:20px;
border-radius:50%;
background:black;
}

window.onload=function(){ varhourNode=document.querySelector(".wrap>.hour"); varminNode=document.querySelector(".wrap>.min"); varsecNode=document.querySelector(".wrap>.sec"); varulNode=document.querySelector(".wrap>ul"); varstyleNode=document.createElement('style'); varliHtml=''; varstyleHtml=''; for(vari=0;i<60;i++){ liHtml+="

"; styleHtml+=".wrap>ul>li:nth-child("+(i+1)+"){transform:rotate("+(i*6)+"deg);}" } ulNode.innerHTML=liHtml; styleNode.innerHTML=styleHtml; document.querySelector('head').appendChild(styleNode); moveTime(); setInterval(moveTime,1000); functionmoveTime(){ vardate=newDate(); varsec=date.getSeconds(); varmin=date.getMinutes()+sec/60; varhour=date.getHours()+min/60; hourNode.style.transform="rotate("+(hour*30)+"deg)"; minNode.style.transform="rotate("+(min*6)+"deg)"; secNode.style.transform="rotate("+(sec*6)+"deg)"; } }

实现要点

1、transform-origin的基本点的应用
2、批量处理html和样式的信息
3、指证位置进行了优化（时针与小时和分针位置有关，分针与分和秒针位置有关）。

新增居中方式：

开启绝对定位left:50%;top:50%;transform:translate(50%,50%);

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部

514930285
czq8825@qq.com

纯js+css实现在线时钟

热门推荐

随机推荐