html+css+js倒影时分秒

最新推荐文章于 2024-08-22 14:32:34 发布

html+css+js网页设计

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量327

点赞数 8

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_42431718/article/details/135501978

版权

<!DOCTYPE html>
<html>
<head>
  <title>倒影时分秒</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f2f2f2;
    }

    .clock {
      position: relative;
      font-family: Arial, sans-serif;
      font-size: 72px;
      color: #333;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .reflection {
      position: absolute;
      top: 100%;
      left: 0;
      transform: scaleY(-1);
      opacity: 0.4;
      filter: blur(4px);
    }
  </style>
</head>
<body>
  <div class="clock">
    <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
    <div class="reflection">
      <span id="hoursReflection">00</span>:<span id="minutesReflection">00</span>:<span id="secondsReflection">00</span>
    </div>
  </div>

  <script>
    function updateClock() {
      const now = new Date();
      const hours = formatTime(now.getHours());
      const minutes = formatTime(now.getMinutes());
      const seconds = formatTime(now.getSeconds());

      document.getElementById('hours').textContent = hours;
      document.getElementById('minutes').textContent = minutes;
      document.getElementById('seconds').textContent = seconds;

      document.getElementById('hoursReflection').textContent = hours;
      document.getElementById('minutesReflection').textContent = minutes;
      document.getElementById('secondsReflection').textContent = seconds;

      setTimeout(updateClock, 1000);
    }

    function formatTime(time) {
      return time.toString().padStart(2, '0');
    }

    updateClock();
  </script>
</body>
</html>