html古典时钟代码

HTML古典时钟是一种居家装饰品，也是一种非常有意思的HTML代码练习。下面是一份HTML古典时钟代码样本。

<!DOCTYPE html>
<html>
<head>
  <title>HTML古典时钟</title>
  <style>
    #clock {
      border: 5px solid black; 
      border-radius: 50%; 
      width: 300px; 
      height: 300px; 
      position: relative; 
    }
    #center {
      border: 10px solid black; 
      border-radius: 50%; 
      background-color: black;
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%,-50%);
      width: 20px; 
      height: 20px;
    }
    .hand { 
      background-color: black; 
      position: absolute; 
      top: 50%; 
      left: 50%;
      transform-origin: bottom; 
      transform: translate(-50%) rotate(-90deg); 
    }
    #hour-hand { 
      width: 8px; 
      height: 60px; 
      border-radius: 8px; 
      z-index: 3; 
    }
    #minute-hand { 
      width: 6px; 
      height: 80px; 
      border-radius: 6px; 
      z-index: 2; 
    }
    #second-hand {
      width: 4px; 
      height: 100px; 
      border-radius: 4px; 
      z-index: 1; 
    }
  </style>
</head>
<body onload="setInterval('showTime()',1000)">
  <div id="clock">
    <div id="center"></div>
    <div id="hour-hand" class="hand"></div>
    <div id="minute-hand" class="hand"></div>
    <div id="second-hand" class="hand"></div>
  </div>
  <script>
    function showTime() {
      var Now = new Date();
      var hour = Now.getHours();
      var minute = Now.getMinutes();
      var second = Now.getSeconds();
      var hourDeg = hour * 30 + (minute / 2); 
      var minuteDeg = minute * 6;
      var secondDeg = second * 6;
      document.getElementById("hour-hand").style.transform = "translate(-50%) rotate(" + hourDeg + "deg)";
      document.getElementById("minute-hand").style.transform = "translate(-50%) rotate(" + minuteDeg + "deg)";
      document.getElementById("second-hand").style.transform = "translate(-50%) rotate(" + secondDeg + "deg)";
    }
  </script>
</body>
</html>

html古典时钟代码

这份代码使用了HTML、CSS和JavaScript。HTML代码定义了一个包含三个指针的钟表，在CSS样式表中定义了表盘、中心点和三个不同颜色的指针，JavaScript代码则负责计算指针的位置并按秒更新。

这份代码可以给初学者提供一个非常基础的HTML代码练习，同时也很有趣，因为可以自己动手做自己的古典钟表装饰品。

相关推荐