clock

最新推荐文章于 2024-08-31 11:23:08 发布

liuyi0604

最新推荐文章于 2024-08-31 11:23:08 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/liuyi0604/article/details/81214062

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .clock{
            height: 600px;
            width: 600px;
            margin: 50px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }
        .clock div{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0 ;
        }
        .h{
            background: url(images/hour.png) no-repeat center center;
        }
        .m{
            background: url(images/minute.png) no-repeat center center;
        }
        .s{
            background: url(images/second.png) no-repeat center center;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="h" id="hour"></div>
        <div class="m" id="minute"></div>
        <div class="s" id="second"></div>
    </div>
</body>
</html>
<script>
    var hour=document.getElementById("hour");
    var minute=document.getElementById("minute");
    var second=document.getElementById("second");

    //开启定时器
    var h=0,m=0,s=0,ms=0;
    setInterval(function(){
        var date=new Date();  //得到最新时间
        ms=date.getMilliseconds(); //得到现在的毫秒
        s=date.getSeconds()+ms/1000;//得到秒数
        m=date.getMinutes()+s/60;
        h=date.getHours()%12+m/60;
        //console.log(h);
        //旋转角度
        second.style.webkitTransform="rotate("+s*6+"6deg)";
                      //变化              旋转
        minute.style.webkitTransform="rotate("+m*6+"6deg)";
        hour.style.webkitTransform="rotate("+h*30+"6deg)";
    },1000)
</script>