css3+js 实现时钟效果

时间：2022-12-20 23:21:39

效果图：

![时钟效果图](http://img.blog.csdn.net/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();

总结

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

相关文章