HTML部分：

CSS部分：

.analog-clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f3f3f3;
}

.hour-hand,
.minute-hand,
.second-hand,
.middle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
}

.hour-hand {
  width: 6px;
  height: 50px;
  background-color: #333;
  transform: translate(-50%, 0%) rotate(90deg);
}

.minute-hand {
  width: 4px;
  height: 80px;
  background-color: #333;
  transform: translate(-50%, 0%) rotate(180deg);
}

.second-hand {
  width: 2px;
  height: 100px;
  background-color: #f00;
  transform: translate(-50%, 0%) rotate(-90deg);
}

.middle-circle {
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

JavaScript部分：

function updateClock(){
  var currentDate = new Date();
  var hours = currentDate.getHours();
  var minutes = currentDate.getMinutes();
  var seconds = currentDate.getSeconds();
  var hourHand = document.querySelector('.hour-hand');
  var minuteHand = document.querySelector('.minute-hand');
  var secondHand = document.querySelector('.second-hand');
  var hourPosition = hours*30 + (minutes/60)*30;
  var minutePosition = (minutes/60)*360;
  var secondPosition = (seconds/60)*360;
  hourHand.style.transform = 'translate(-50%, 0%) rotate('+hourPosition+'deg)';
  minuteHand.style.transform = 'translate(-50%, 0%) rotate('+minutePosition+'