前端具有科技感的显示当前年月日时分秒时间的组件

可以使用 JavaScript 和 CSS 来创建一个具有科技感的显示当前年月日时分秒时间的组件。

HTML 代码：

<div class="clock">
  <div class="clock-face">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
    <div class="center-dot"></div>
  </div>
  <div class="date">
    <span class="day"></span>
    <span class="month"></span>
    <span class="year"></span>
  </div>
</div>

CSS 代码：

.clock {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

.clock-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #fff;
  box-sizing: border-box;
  background-color: #333;
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 60px;
  margin: -30px 0 0 -4px;
  transform-origin: 50% 100%;
  background-color: #fff;
}

.hour-hand {
  height: 40px;
  width: 12px;
  margin-top: -20px;
  z-index: 3;
}

.minute-hand {
  z-index: 2;
}

.second-hand {
  z-index: 1;
}

.center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 4;
}

.date {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.day,
.month,
.year {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

JavaScript 代码：

function updateClock() {
  const now = new Date();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();

  const hourHand = document.querySelector('.hour-hand');
  const minuteHand = document.querySelector('.minute-hand');
  const secondHand = document.querySelector('.second-hand');

  const hourDegrees = (hour / 12) * 360 + (minute / 60) * 30 - 90;
  const minuteDegrees = (minute / 60) * 360 + (second / 60) * 6 - 90;
  const secondDegrees = (second / 60) * 360 - 90;

  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
  minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
  secondHand.style.transform = `rotate(${secondDegrees}deg)`;

  const day = now.getDate();
  const month = now.getMonth() + 1;
  const year = now.getFullYear();

  const daySpan = document.querySelector('.day');
  const monthSpan = document.querySelector('.month');
  const yearSpan = document.querySelector('.year');

  daySpan.textContent = day;
  monthSpan.textContent = month;
  yearSpan.textContent = year;
}

setInterval(updateClock, 1000);

这段代码将会创建一个时钟，其中包括了一个圆形的时钟面，指针和中心点。时钟面的 CSS 样式使用了圆形的盒子模型，指针使用了绝对定位和旋转变换。JavaScript 代码使用了 setInterval() 函数来更新指针的位置，并使用了 new Date() 函数获取当前时间