时钟自动动效果

<script>
    
    function gettime(){
   //首先活滴当前时间
   var d=new Date();
    //获取每一个小时的
     var ms=d.getMilliseconds()
    var h=d.getHours()+m/60;
    var  m =d.getMinutes()+s/60
    var s =d.getSeconds()+ms/1000;
   
    img1.style.transform=`rotate(${h*30}deg )`
    img2.style.transform=`rotate(${m*6}deg )`
    img3.style.transform=`rotate(${s*6}deg )`
    }
    gettime()
    //另封装好的函数再重新每一秒根据时间动
    setInterval(gettime,1)
 
</script>

<div>
        <img id="im" src="./im/pan.png" alt="">
        <img id="img1" src="./im/shi.png" alt="">
        <img id="img2" src="./im/fen.png" alt="">
        <img id="img3" src="./im/haomiao.png" alt="">

    </div>
    

<style>
        div {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px red solid;
            position: relative;
        }

        #im {
            position: absolute;
            right: -55px;


        }

        #img1 {
            /* border: 1px red solid; */
            transform: rotate(90deg);
            height: 120px;
            position: absolute;
            top: 170px;
            left: 242px;
            transform-origin: 55% 80%
            
        }

        #img2 {
            /* border: 1px red solid; */
            transform: rotate(270deg);
            height: 380px;
            position: absolute;
            top: 55px;
            left: 242px;
            transform-origin: 40% 57%
        }

        #img3 {
            transform: rotate(10deg);
            /* border: 1px red solid; */
            height: 350px;
            position: absolute;
            transition: all 1s ;
            top: 73px;
            left: 243px;
            transform-origin: 40% 57%
            
            
        }
    </style>

完成时钟

创建函数

建立当前时间  小时分钟 秒最后建立毫秒

建立每个时间对应的转换值

例如15 分钟/60为多少小时  分钟/60为多少

最后用计时器