纯 html,css,js 实现动态时钟

山庄夜话

于 2023-08-01 20:34:28 发布

阅读量355

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_42981665/article/details/132050335

版权

<!DOCTYPE html>
<html>
<head>
<style>
   html,body{
       width:100vw;
       height:100vh;
       overflow:hidden;
       transform-style:preserve-3d;
       font-weight:bold;
       background-color: steelblue;
       color:white;
   }
   #clock{
       margin:auto auto;
       width:300px;
       height:300px;
       transform-style:preserve-3d;
       transform:rotate(30deg,30deg);
       transform:rotateY(0deg);
   }
   ul,li{
       position:absolute;
       list-style-type:none;
       text-align:center;
       background-color:transparent;
   }
   li{
       top:20px;
       left:135px;
       width:30px;
       height:130px;
       margin:0;
       padding:0;
       transform-origin:center bottom;
   }
</style>
</head>
<body>
   <div id="clock"></div>

</body>
<script>
   window.οnlοad=function(){
       let clock=document.querySelectorAll("#clock")[0]
       for(let i=1;i<=12;i++){
           let dom=document.createElement("li")
           dom.innerHTML=i
           dom.style="transform:rotate("+ i*30 + "deg);"
           clock.appendChild(dom)
       }

       // 创建时针分针秒针
       let pHour=document.createElement("li")
       let pMinute=document.createElement("li")
       let pSecond=document.createElement("li")

       // 将时针分针秒针加入到 clock
       clock.appendChild(pHour)
       clock.appendChild(pMinute)
       clock.appendChild(pSecond)

       // 动态改变表针状态每秒一次
       let c=setInterval(()=>{
           d=new Date()
           let deg=(d.getHours()%12)*30 + d.getMinutes()/2
           pHour.style="background-color:blue;top:50px;left:147px;width:6px;height:100px;transform:rotate("+ deg + "deg);"
               + "border-radius:50% 50% 0% 0%;"
           pMinute.style="background-color:green;top:40px;left:149px;width:4px;height:110px;transform:rotate("+ d.getMinutes()*6 + "deg);"
               + "border-radius:50% 50% 0% 0%;"
           pSecond.style="background-color:red;top:25px;left:150px;width:1px;height:125px;transform:rotate("+ d.getSeconds()*6 + "deg);"
       },1000)
   }
</script>
</html>