Tạo đồng hồ hình tròn chạy kim

Chia sẻ code tạo đồng hồ chạy bằng kim, lấy giờ hiện tại. Tạo đồng hồ bằng JavaScript. Cách tạo đồng hồ chạy 3 kim bằng HTML, CSS và JavaScript.

Toàn bộ code chạy bằng JavaScript

<style>
/*<![CDATA[*/
#container{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}
#clock{width:400px;height:400px;border:10px solid #333;border-radius:50%;position:relative;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,0.3)}
.hand{position:absolute;transform-origin:50% 100%;background-color:black;z-index:2}
.hand::after{content:'';position:absolute;width:6px;height:20px;background-color:black;top:0;left:50%;transform:translateX(-50%);border-radius:3px 3px 0 0;z-index:-1}
#hourHand{height:80px;width:5px;z-index:2}
#minuteHand{height:110px;width:3px}
#secondHand{height:130px;width:2px;background-color:red}
.hourHand::after{height:15px}
.hour-number{position:absolute;font-size:35px;font-weight:bold;font-family:'Arial',sans-serif;color:#000;z-index:1;transform: translate(-50%, -50%);}
#centerDot{width:12px;height:12px;background-color:black;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}
/*]]>*/
</style>
<div id="container">
<div id='clock'>
  <div id='centerDot'/>
</div>
</div>
<script>
  //<![CDATA[
  function updateClock() {
    const clock = document.getElementById('clock');
    const hourHand = document.getElementById('hourHand');
    const minuteHand = document.getElementById('minuteHand');
    const secondHand = document.getElementById('secondHand');
    const now = new Date();
    const hours = now.getHours() % 12;
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    const hourAngle = (hours * 30) + (minutes / 60 * 30);
    const minuteAngle = minutes * 6;
    const secondAngle = seconds * 6;
    hourHand.style.transform = `rotate(${hourAngle}deg)`;
    minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
    secondHand.style.transform = `rotate(${secondAngle}deg)`;
  }
  document.addEventListener('DOMContentLoaded', () => {
    const clock = document.getElementById('clock');
    const hourHand = document.createElement('div');
    const minuteHand = document.createElement('div');
    const secondHand = document.createElement('div');
    hourHand.id = 'hourHand';
    minuteHand.id = 'minuteHand';
    secondHand.id = 'secondHand';
    hourHand.className = 'hand';
    minuteHand.className = 'hand';
    secondHand.className = 'hand';
    clock.appendChild(hourHand);
    clock.appendChild(minuteHand);
    clock.appendChild(secondHand);
    // Tùy chỉnh vị trí kim và đồng hồ
    hourHand.style.left = '50%';
    hourHand.style.bottom = '50%';
    minuteHand.style.left = '50%';
    minuteHand.style.bottom = '50%';
    secondHand.style.left = '50%';
    secondHand.style.bottom = '50%';
    // Thêm số từ 1 đến 12
    for (let i = 1; i <= 12; i++) {
      const hourNumber = document.createElement('div');
      hourNumber.className = 'hour-number';
      hourNumber.innerText = i.toString();
      const angle = i * 30 - 90;
      const posX = Math.cos(angle * (Math.PI / 180)) * 150 + 200;
      const posY = Math.sin(angle * (Math.PI / 180)) * 150 + 200;
      hourNumber.style.left = `${posX - 8}px`;
      hourNumber.style.top = `${posY - 10}px`;
      clock.appendChild(hourNumber);
    }
    // Thêm chấm tròn ở điểm nối
    const centerDot = document.getElementById('centerDot');
    clock.appendChild(centerDot);
    setInterval(updateClock, 1000);
    updateClock();
  });
  //]]>
</script>