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: %;

                height: %;

                position: absolute;

                top: ;

                left: ;

            }

            .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 =,m=,h=,ms=;

        setInterval(function(){

            //内容处理开始

            var date = new Date();//获取时间

            ms = date.getMilliseconds(); //现在的毫秒数

            s = date.getSeconds() + ms/;

            m = date.getMinutes() + s / ;

            h = date.getHours() %  + m /;

            // document.write(parseInt(h) +":"+parseInt(m ) +":"+parseInt(s) );

            //旋转角度

            //一圈 360度 一共60秒  一秒是 6度

            second.style.WebkitTransform = "rotate("+s* + "deg)";

            minute.style.WebkitTransform = "rotate(" + m* + "deg)";

            hour.style.WebkitTransform = "rotate(" + h* + "deg)";

        },);

    </script>

</html>
2.在线预览
巴特西

js中时钟表盘

最新文章

热门文章
