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>

<body>
<div id="boxs">
<div id="box1" class="box" style="left:0px;">
    <div id="div1" class="div1"></div>
    <div id="div2" class="div1"></div>
</div>
<div id="box2" class="box" style="left:55px;">
    <div id="div3" class="div1"></div>
    <div id="div4" class="div1"></div>
</div>
<div class="divspan" style="left:110px"><span style="top:0px"></span><span style="bottom:0px"></span></div>
<div id="box3" class="box" style="left:125px;">
    <div id="div5" class="div1"></div>
    <div id="div6" class="div1"></div>
</div>
<div id="box4" class="box" style="left:180px;">
    <div id="div7" class="div1"></div>
    <div id="div8" class="div1"></div>
</div>
    <div class="divspan" style="left:235px"><span style="top:0px"></span><span style="bottom:0px"></span></div>
<div id="box5" class="box" style="left:250px;">
    <div id="div9" class="div1"></div>
    <div id="div10" class="div1"></div>
</div>
<div id="box6" class="box" style="left:305px;">
    <div id="div11" class="div1"></div>
    <div id="div12" class="div1"></div>
</div>
</div>
<div>
    <audio controls src="徐环 - 你的名字，本兮 [mqms2].mp3" autoplay loop style="display: none"></audio>
</div>
</body>
</html>
Jquery简单动画之唯美时钟

猜你喜欢
