科技感炫酷的实时年月日时分秒时间显示组件

这个组件可以使用 JavaScript 和 CSS 实现，并在背景上显示渐变色，数字和日期会在半透明的背景上显示。JavaScript 会更新时间和日期，并将它们显示在相应的元素上。setInterval 函数会每秒钟执行一次 updateClock 函数，以更新时间和日期。

HTML:

<div class='clock'>
  <div class='time'>
    <span class='hour'></span>
    <span class='minute'></span>
    <span class='second'></span>
  </div>
  <div class='date'>
    <span class='month'></span>
    <span class='day'></span>
    <span class='year'></span>
  </div>
</div>

CSS:

.clock {
  font-family: monospace;
  font-size: 3rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(to bottom, #6393c1, #3c5d80);
  padding: 2rem;
  border-radius: 1rem;
}

.time {
  display: flex;
  justify-content: center;
  align-items: center;
}

.time span {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
}

.date {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

.date span {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 0.25rem;
}

JavaScript:

function updateClock() {
  const now = new Date();

  const hour = now.getHours() % 12 || 12;
  const minute = now.getMinutes();
  const second = now.getSeconds();

  const month = now.toLocaleString('default', { month: 'long' });
  const day = now.getDate();
  const year = now.getFullYear();

  const hourElement = document.querySelector('.hour');
  const minuteElement = document.querySelector('.minute');
  const secondElement = document.querySelector('.second');
  const monthElement = document.querySelector('.month');
  const dayElement = document.querySelector('.day');
  const yearElement = document.querySelector('.year');

  hourElement.textContent = padZero(hour);
  minuteElement.textContent = padZero(minute);
  secondElement.textContent = padZero(second);
  monthElement.textContent = month;
  dayElement.textContent = padZero(day);
  yearElement.textContent = year;
}

function padZero(num) {
  return num.toString().padStart(2, '0');
}

updateClock();
setInterval(updateClock, 1000);