wordpress CMS主题 微信
Home > HTML5与CSS3.0 > CSS3 + jQuery实现动态时钟效果

CSS3 + jQuery实现动态时钟效果

高时银博客 HTML5与CSS3.0 点击: 1,477 次 0 0
  • 标签:
  • 动态时钟效果的实现,其实在网页的实现方法是很多。如flash动画、JS动画等。flash固然非常炫,但是起来起不受到网页开发者的疏远,而JS来实现却需要写非常多的代码,所以也不是很方便。而随着CSS3的出现,再简单地结合一下jQuery,就可以轻松地实现同样的动态时钟效果,而在代码数量上可以大大减少(效果如下图)。那么,怎样通过CSS3+JQuery来实现动态时钟效果呢?一起来看一下吧。

    CSS3 + jQuery实现动态时钟效果

    动态时钟演示

    1、HTML代码:

    <div class="one">
    </div>

    2、CSS3代码:

    <style>
    li{list-style:none;}
    .one{
    width:400px; height:400px; border:1px solid #ccc;
    margin:50px auto;
    border-radius:200px; //让时钟变成圆形
    box-shadow:2px 2px 3px #aaa; ////给时钟添加阴影
    background-image:-webkit-radial-gradient(center center,circle,#fff,#bbb); //给时钟添加渐变
    position:relative;
    }
    </style>

    3、jQuery修改CSS3:

    <script type="text/javascript">
    $(function(){
    var one=$(".one");
    make_nan();
    var day = new Date();
    var hour = day.getHours();  //获取小时
    var min = day.getMinutes(); //获取分钟
    var sec = day.getSeconds(); //获取秒
    one.append("<div class='cir'></div>"); //添加圆心
    $(".cir").css({ //添加圆心样式
    position:'absolute',
    zIndex:999,
    left:192,
    top:192,
    width:16,
    height:16,
    background:'#999',
    borderRadius:8
    });
    var ss = made_zhen("sec",sec*6-180,3,170,200,200,"red"); //创建秒针
    var mi = made_zhen("min",min*6-180,4,130,198,198,"#aaa"); //创建分针
    var ho = made_zhen("hour",hour*30+min*6/12-180,6,100,197,197,"#555");//创建秒针

    setInterval(function(){ //时针、分针、秒针 动画
    var day = new Date();
    var hour = day.getHours();
    var min = day.getMinutes();
    var sec = day.getSeconds();
    $("."+ss).css({transform:'rotate('+(sec*6-180)+'deg)'}); //秒针每秒走动30度
    $("."+mi).css({transform:'rotate('+(min*6-180)+'deg)'});
    $("."+jo).css({transform:'rotate('+(hour*30+min*6/12-180)+'deg)'});
    },1000);

    function made_zhen(obj,tim,width,height,left,top,color){ //创建时针、分针、秒针 函数
    var div = "<div class='"+obj+"'></div>";
    one.append(div);
    $("."+obj).css({
    position:'absolute',
    width:width,
    height:height,
    background:color,
    left:left,
    top:top,
    transformOrigin:'0 0',
    transform:'rotate('+tim+'deg)'
    });
    return obj;
    }

    function make_nan(){ //绘制时钟 60个点 函数
    for(var i=0; i<60; i++){
    var wid = 0;
    var hei = 0;
    var color;
    if(i%5==0){ //到5的倍数 加宽加长
    wid = 5;
    hei = 8;
    color = "#555";
    }else{
    wid = 3;
    hei = 5;
    color = "#aaa";
    }
    one.append("<div class='hao"+ i +"'></div>");
    $(".hao" + i).css({
    position:'absolute',
    width:wid+"px",
    height:hei+"px",
    background:color,
    left:200,
    top:0,
    transformOrigin:'0 200px',
    transform:'rotate('+(i*6)+'deg)'
    })
    }
    }

    })
    </script>

    通过上面的代码组合,就简单实现了网页动态时钟效果。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201512124911.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论