css3+js 实现时钟效果_function(callback){ window.settimeout(callback, 20-优快云博客

本文介绍了一个基于HTML、CSS和JavaScript的动态时钟项目。通过精确的布局和transform rotate属性实现了时钟指针的实时转动效果。文章详细展示了时钟的HTML结构、样式设置及JavaScript逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

![时钟效果图](https://img-blog.youkuaiyun.com/20161004205235916)

代码

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/clock.css">
    <script type="text/javascript" src="../plugins/jquery.js"></script>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li class="ck ck0"></li>
            <li class="ck ck1"></li>
            <li class="ck ck2"></li>
            <li class="ck ck3"></li>
            <li class="ck ck4"></li>
            <li class="ck ck5"></li>
            <li class="ck ck6"></li>
            <li class="ck ck7"></li>
            <li class="ck ck8"></li>
            <li class="ck ck9"></li>
            <li class="ck ck10"></li>
            <li class="ck ck11"></li>
        </ul>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
        <div class="dot"></div>
    </div>
    <script type="text/javascript" src="../js/clock.js"></script>
</body>
</html>

clock.css

主要使用transform rotate属性实现时钟走动和布局

ul{margin: 0;padding: 0;list-style: none;}
.wrapper{
    margin: 100px;
    position: relative;
    border: 18px groove #886578;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(230,212,180,0.8);
    background-image: url(../img/bg.jpg);
    background-size: 100% 100%;
    background-blend-mode: lighten;
}
.ck{
    position: absolute;
    width: 6px;
    height: 20px;
    background: #123;
}
.sec{
    width: 2px;
    height: 100px;
    background: green;
    position: absolute;
    left:99px;
    top:20px;
}
.min{
    width: 4px;
    height: 85px;
    background: blue;
    position: absolute;
    left: 98px;
    top:36px;
}
.hour{
    width: 6px;
    height: 65px;
    background: red;
    position: absolute;
    left: 97px;
    top:55px;
}
.dot{
    width: 16px;
    height: 16px;
    position: absolute;
    top:92px;
    left: 92px;
    background: #123;
    border-radius: 50%;
}

clock.js


window.RAF = (function(){
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
})();
var clock={
    getTime:function() {
        var date = new Date();
        var t= {
            h:date.getHours(),
            m:date.getMinutes(),
            s:date.getSeconds(),
        };
        return t;
    },
    getHourAngle:function(t) {//根据时间计算时针的角度，忽略秒的影响
        return ((t.h%12)*30 + t.m*0.5);
    },
    getMinAngele:function(t) {//根据时间计算分针的角度
        return (t.m*6+t.s*0.1);
    },
    getSecAngele:function(t) {//根据时间更新秒针的角度
        return t.s*6;
    },
    ctLoop:function() {
        var _this = this;
        _this.setAngle();
        window.RAF(function() {
            _this.ctLoop();
        })
    },
    setAngle:function() {
        var _this = this;
        var ts =_this.getTime();
        var a = {
            ha:_this.getHourAngle(ts),
            ma:_this.getMinAngele(ts),
            sa:_this.getSecAngele(ts),
        }
        _this.setClockAg(a);
    },
    //重绘时钟各指针的角度
    setClockAg:function(a) {
        $(".hour").css({
            'transform-origin':'3px 45px',
            'transform':'rotateZ('+a.ha+'deg)'
        })
        $(".min").css({
            'transform-origin':'2px 64px',
            'transform':'rotateZ('+a.ma+'deg)'
        })
        $(".sec").css({
            'transform-origin':'1px 80px',
            'transform':'rotateZ('+a.sa+'deg)'
        })

    },
    //初始化时钟表面布局
    clkInit:function() {
        for (var i = 0; i < 12; i++) {
            $(".ck"+i).css({
                "left":"97px",
                "transform-origin":'3px 100px',
                "transform":'rotateZ('+30*i+'deg)'
            })
        }
    }
}
clock.clkInit();
clock.ctLoop();

总结

   元素大多采用绝对定位，导致无法调整大小，指针的旋转点设置需要比较精确。