时钟效果

发布于 2020-08-09  1876 次阅读 本文共1044个字

demo js源码如下，这里用到了4张图片，分别是表盘，还有三个时针，各位有用的话可以按照自己需求下载图代替。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>时钟效果</title>
        <style>
            .clock{
                width: 600px;
                height: 600px;
                margin: 50px auto;
                background:url(images/clock.jpg) no-repeat;
                position: relative;
            }
            .clock div{
                width: 600px;
                height: 600px;
                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" id="clock">
            <div class="h"></div>
            <div class="m"></div>
            <div class="s"></div>
        </div>
    </body>
</html>
<script type="text/javascript">
    var clock = document.getElementById("clock");
    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;
        
        clock.children[0].style.WebkitTransform = "rotate("+h*30+"deg)";
        clock.children[1].style.WebkitTransform = "rotate("+m*6+"deg)";
        clock.children[2].style.WebkitTransform = "rotate("+s*6+"deg)";
    },50);
</script>
赏

努力，只为遇见更好的自己！