时钟

最新推荐文章于 2023-04-23 11:00:14 发布

mj_leona

最新推荐文章于 2023-04-23 11:00:14 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/mj_leona/article/details/79579888

版权

<style>
    .clock {
        width: 600px;
        height: 600px;
        margin:50px auto;
        background: url(images/clock.jpg) no-repeat;
        position: relative;
    }
    .clock div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        
    }
    .h {
        background: url(images/hour.png) no-repeat center center;
    }
    .m {
        background: url(images/minute.png) no-repeat center center;
    }
    .s {
        background: url(images/second.png) no-repeat center center;
    }

</style>

<body>
<div class="clock">
    <div class="h" id="hour"></div>
    <div class="m" id="minute"></div>
    <div class="s" id="second"></div>
</div>
</body>

<script>
  var hour = document.getElementById("hour");
  var minute = document.getElementById("minute");
  var second = document.getElementById("second");
  
  setInterval(time,10);
  function time() {
      var ms, s, m , h ;
      var date = new Date();
      ms = date.getMilliseconds();
      s = date.getSeconds()+ms/1000;
      m = date.getMinutes()+s/60;
      h = date.getHours()%12+m/60;

      second.style.webkitTransform = "rotate("+s*6+"deg)";  //支持google浏览器查看
      minute.style.webkitTransform = "rotate("+m*6+"deg)";
      hour.style.webkitTransform = "rotate("+h*30+"deg)";
  }

mj_leona

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时钟

&lt;style&gt; .clock { width: 600px; height: 600px; margin:50px auto; background: url(images/clock.jpg) no-repeat; position: relative; } .clock div ...
复制链接

扫一扫