jQuery配合html5做到动态时钟效果

因为html基础较差所以页面有些难看
但主要是学习jQuery的使用
先来看看效果

指针位置不要在意…
来看下布局

 <div style="background:url('img/clock.jpg');width: 425px;height: 425px">
<div class="center"></div>
    <div class="pointer hour"></div>
    <div class="pointer second"></div>
    <div class="pointer minute"></div>
</div>

 <style type="text/css">
        .center{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #514f64;
            top: 212px;
            left: 212px;
            position: absolute;
        }
        .pointer {
            position: absolute;
            position: absolute;
            z-index: 20;
        }

        .hour {
            width: 100px;
            height: 4px;
            top: 216px;
            left: 216px;
            background-color: #000;
            border-radius: 2px;
            transform-origin: 0 50%;
            box-shadow: 1px -3px 8px 3px #aaa;
        }

        .minute {
            width: 130px;
            height: 2px;
            top: 216px;
            left:216px;
            background-color: #000;
            transform-origin: 7.692% 50%;
            box-shadow: 1px -3px 8px 1px #aaa;
        }
        .second {
            width: 170px;
            height: 1px;
            top: 216px;
            left: 216px;
            background-color: #f60;
            transform-origin: 11.765% 50%;
            box-shadow: 1px -3px 7px 1px #bbb;
        }
    </style>

js代码

//思路是设置一个setinterval每一秒执行一次,在方法中获取时间并转换成指针的角度
<script type="text/javascript">
    $(function () {
        var settime = setInterval(function () {
            var date = new Date()
            var second = date.getSeconds()*6
            var minute = date.getMinutes()*6
            var hour = date.getHours()*30
            //使用transform属性旋转并设置旋转中心为指针的左上角
            $('.second').css("transform-origin",'0%,0%')
            //因为指针初始状态是90度 所以让角度补足一圈
            $('.second').css("transform","rotate("+(270+second)+"deg)")
            $('.minute').css("transform-origin",'0%,0%')
            $('.minute').css("transform","rotate("+(270+minute)+"deg)")
            $('.hour').css("transform-origin",'0%,0%')
            $('.hour').css("transform","rotate("+(270+hour)+"deg)")
        },1000)
    })
</script>