使用Date类实现时钟显示效果 要求： 1.使用JS动态获取当前时间； 2.使用setInterval()函数实现每1秒执行一次功能显示时钟； 3.时钟效果自定义，可以添加外框、数字时钟、各种样式修饰等，根据时钟效果打分

以下是使用Date类实现时钟显示效果的示例代码，包括了外框、数字时钟和样式修饰：

HTML代码：

<div class="clock">
  <div class="frame">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
  </div>
</div>

CSS代码：

.clock {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.frame {
  position: relative;
  width: 200px;
  height: 200px;
  border: 10px solid #333;
  border-radius: 50%;
  overflow: hidden;
}

.hours,
.minutes,
.seconds {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #333;
  transform-origin: bottom left;
}

.hours {
  transform: rotate(0deg);
}

.minutes {
  transform: rotate(0deg);
}

.seconds {
  transform: rotate(0deg);
  background-color: red;
}

JavaScript代码：

function updateClock() {
  const now = new Date();
  const hours = now.getHours() % 12;
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  const hoursAngle = (hours + minutes / 60) * 30;
  const minutesAngle = minutes * 6;
  const secondsAngle = seconds * 6;

  const hoursElement = document.querySelector('.hours');
  const minutesElement = document.querySelector('.minutes');
  const secondsElement = document.querySelector('.seconds');

  hoursElement.style.transform = `rotate(${hoursAngle}deg)`;
  minutesElement.style.transform = `rotate(${minutesAngle}deg)`;
  secondsElement.style.transform = `rotate(${secondsAngle}deg)`;
}

setInterval(updateClock, 1000);

这个示例代码使用了CSS3的transform属性来实现时钟的旋转效果，同时根据当前时间计算出时针、分针和秒针的角度，通过JavaScript动态设置CSS样式来实现时钟的显示效果。可以根据实际情况自定义样式修饰。