JS实现时钟效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js时钟效果</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="clo">
            <div class="h"></div>
            <div class="m"></div>
            <div class="s"></div>
        </div>
    </body>
</html>
<script type="text/javascript">
    var clock = document.getElementById("clo");
    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>

这里随便附的几张图，代码中用到的也可以自行调换哦~

clock.jpg hour.png minute.png second.png

相关阅读:
tidb的数据校验工具sync-diff-inspector
tidb的binlog同步工具TiDB Binlog
tidb的数据同步ticdc
tidb的数据备份与恢复工具br
tiup的数据同步工具dm
反人类设计是如何炼成的？
tidb的tidb组件的配置文件详解
tidb的tikv配置详解
tidb的pd配置详解
tidb的tiup工具

原文地址：https://www.cnblogs.com/Scar007/p/7911102.html