js中时钟表盘

1.js时钟表盘

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .clock{
                width: 600px;
                height: 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>
    <script>
        function $(id)
        {
            return document.getElementById(id);
        }
        var hour = $('hour');
        var minute = $('minute');
        var second = $('second');
        // var date = new Date();
        // console.log(date);
        // console.log(hour);
        //开始定时
        var s =0,m=0,h=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;
            // document.write(parseInt(h) +":"+parseInt(m ) +":"+parseInt(s) );

            //旋转角度
            //一圈 360度 一共60秒  一秒是 6度
            second.style.WebkitTransform = "rotate("+s*6 + "deg)";
            minute.style.WebkitTransform = "rotate(" + m*6 + "deg)";
            hour.style.WebkitTransform = "rotate(" + h*30 + "deg)";
            
        },100);
    </script>
</html>

View Code

2.在线预览

posted @ 2017-03-16 19:46 江山代有才人出阅读(636) 评论(0) 编辑收藏举报

刷新页面返回顶部

江山如画

版权声明：本博客所载文章，原创文章的版权归本人所有，未经许可，不得转载。转载文章的版权归原作者所有，如果侵犯了您的版权，请通知本人，本人将会删除相应文章。

js中时钟表盘

公告