欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-28 10:02:54
...

因为html基础较差所以页面有些难看
但主要是学习jQuery的使用
先来看看效果
jQuery配合html5做到动态时钟效果
指针位置不要在意…
来看下布局

 <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>