zoukankan      html  css  js  c++  java
  • 仿真的时钟转动

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style>
     7         .c {
     8             position: relative;
     9              600px;
    10             height: 600px;
    11             margin: 20px auto;
    12             background: url("images/clock.jpg") no-repeat center center;
    13         }
    14         .c div {
    15             position: absolute;
    16             top: 0;
    17             left: 0;
    18              100%;
    19             height: 100%;
    20 
    21         }
    22         .h {
    23             background: url("images/hour.png") no-repeat center center;
    24         }
    25         .m {
    26             background: url("images/minute.png") no-repeat center center;
    27         }
    28         .s {
    29             background: url("images/second.png") no-repeat center center;
    30         }
    31     </style>
    32     <script>
    33         window.onload = function () {
    34             function $(id){
    35                 return document.getElementById(id);
    36             }
    37             function $arr(array){
    38                 return document.getElementsByTagName(array);
    39             }
    40             var h = $("hour");
    41             var m = $("minute");
    42             var s = $("second");
    43             hour = 0
    44             minute =0
    45             second = 0
    46             var hour = 0,minute = 0,second = 0,ms=0;
    47             setInterval(function(){
    48                 var date = new Date();
    49                 ms = date.getMilliseconds();
    50                 second = date.getSeconds() + ms/1000;
    51                 minute = date.getMinutes() + second/60;
    52                 hour = date.getHours()%12 + minute/60;
    53                 s.style.webkitTransform = "rotate("+second*6+"deg)";
    54                 m.style.webkitTransform = "rotate("+minute*6+"deg)";
    55                 h.style.webkitTransform = "rotate("+hour*30+"deg)";
    56             },1000);
    57 
    58         }
    59     </script>
    60 </head>
    61 <body>
    62     <div class="c" id="clock">
    63         <div class="h" id="hour"></div>
    64         <div class="m" id="minute"></div>
    65         <div class="s" id="second"></div>
    66     </div>
    67 </body>
    68 </html>

  • 相关阅读:
    Mysql开启日志
    amfphp传递负数的bug
    linux /var/spool/clientmqueue 目录占大量空间
    WinXP SSH连接不上虚拟机的解决方法
    批量数据替换助手V1.0版发布
    也谈反射的应用场景
    反射+特性打造简洁的AJAX调用
    文本处理之利器正则表达式闪亮登场
    关于缩略图的生成与访问策略的一些经验分享
    装饰模式个人的一些理解
  • 原文地址:https://www.cnblogs.com/luxiaoyao/p/7107128.html
Copyright © 2011-2022 走看看