zoukankan html css js c++ java

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

查看全文

相关阅读:
SGU 187 Twist and whirl
伸展树---初步学习
 poj 2503 Babelfish
sublime 3 phpfmt配置（大括号对齐）
Linux Shell 错误： $' ': command not found错误解决
 redis 使用场景
 wireshake tcp 三次握手详解
 ip地址和子网掩码
 phpstorm 远程调式 php
win10，ubuntu时间不对问题

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