• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3 + jQuery实现动态时钟效果

    CSS3 + jQuery实现动态时钟效果

    作者: 分类:HTML5与CSS3.0 点击: 2,738 次
    wordpress CMS主题:ssmay主题

      动态时钟效果的实现,其实在网页的实现方法是很多。如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>

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



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.