Jquery简单动画之唯美时钟

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style type="text/css">
   body{width:1163.63px;height:654.54px;background-image: url(1.jpg);background-repeat:round;}
   *{padding: 0px;margin: 0px;}
   #boxs{width:355px;height:100px;position: absolute;left:50%;margin-left: -177.5px;top:50px;
   animation: move 12s linear infinite;backface-visibility: hidden;}
   .box{width:50px;height:100px;position: absolute;top:0px;}
   .div1{width:50px;height: 50px;border: 4px double pink;box-sizing: border-box;}
   .divspan{width:10px;height:60px;position: absolute;top:20px;}
   .divspan span{width:10px;height: 10px;position: absolute;left:0px;background-color: #E7B4B5;border-radius: 50%;box-sizing: border-box;border: 1px solid #fff;}
   @keyframes move{
       0%{transform: rotateY(0deg);opacity:1;}
       25%{transform: rotateY(75deg);opacity:0.7;}
       75%{transform: rotateY(-75deg);opacity:0.7;}
       100%{transform: rotateY(0deg);opacity:1;}
   }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
   window.onload=function(){
       var timer=setInterval(function(){
           var MyDate=new Date();
           var time=MyDate.getHours();
       var minutes=MyDate.getMinutes();
       var seconds=MyDate.getSeconds();
var aa='box';
           var c;
           if(seconds<10){
               var str=time.toString()+minutes.toString()+"0"+seconds.toString();
           }else if(minutes<10){
               var str=time.toString()+"0"+minutes.toString()+seconds.toString();
           }else if(time<0){
               var str="0"+time.toString()+minutes.toString()+seconds.toString();
           }else{
               var str=time.toString()+minutes.toString()+seconds.toString();
           }
           for(var i=1;i<7;i++){
               aa+=i.toString();
           c=i-1;
               var bb=parseInt(str.charAt(c));
               times(aa,bb);
               aa='box';
           }
       },1000);

   }
   function times(key1,number){
       var keys='#'+key1;
       $(keys).children().css('border-width','4px');
       switch(number){
           case 0:
               $(keys).children().first().css('border-bottom-width','0px');
               $(keys).children().last().css('border-top-width','0px');
               break;
           case 1:
               $(keys).children().css({'border-width':'0px','border-left-width':'4px'});
               break;
           case 2:
               $(keys).children().first().css('border-left-width','0px');
               $(keys).children().last().css('border-right-width','0px');
               break;
           case 3:
               $(keys).children().css('border-left-width','0px');
               break;
           case 4:
               $(keys).children().first().css('border-top-width','0px');
               $(keys).children().last().css({'border-width':'0px','border-right-width':'4px'});
               break;
           case 5:
               $(keys).children().first().css('border-right-width','0px');
               $(keys).children().last().css('border-left-width','0px');
               break;
           case 6:
               $(keys).children().first().css('border-right-width','0px');
               break;
           case 7:
               $(keys).children().first().css({'border-width':'0px','border-right-width':'4px','border-top-width':'4px'});
               $(keys).children().last().css({'border-width':'0px','border-right-width':'4px'});
               break;
           case 8:break;
           case 9:
               $(keys).children().last().css('border-left-width','0px');
               break;
       }
   }
</script>
</head>

Jquery简单动画之唯美时钟

Jquery简单动画之唯美时钟

相关推荐