Hướng dẫn tạo Đồng Hồ Chạy Bằng Kim và Lấy Giờ Hiện Tại Bằng JavaScript

Chào mừng các bạn đến với Tricker Channel! Trong bài viết hôm nay, chúng ta sẽ cùng nhau khám phá cách tạo đồng hồ chạy bằng kim và lấy giờ hiện tại bằng ngôn ngữ lập trình JavaScript. Điều này không chỉ giúp bạn hiểu rõ hơn về cách thức làm việc của đồng hồ, mà còn nâng cao kỹ năng lập trình của bạn.

Mục lục bài viết

Chuẩn Bị Môi Trường

Bài viết liên quan:

• Hướng dẫn Cr@ck Adobe | Sử dụng AI của Photoshop, Illustrator
• Hướng dẫn Crack gói Bumble Gold | Mới Nhất 2023
• Cách sửa lỗi máy tính tự khởi động lại liên tục

Trước tiên, chúng ta cần tạo một trang web cơ bản để chứa đồng hồ. Đảm bảo bạn đã có một trình duyệt web và một trình soạn thảo mã nguồn, ví dụ như Visual Studio Code.

Cách tạo Đồng Hồ Chạy Bằng Kim và Lấy Giờ Hiện Tại Bằng JavaScript

Sau khi đã tạo môi trường, bạn hãy copy toàn bộ code bên dưới đây để thêm vào bất kỳ vị trí nào mà bạn mong muốn trong trang web của bạn.

<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>

Demo Đồng hồ

Kết Luận

Với bài viết này, bạn đã thành công tạo ra một đồng hồ chạy bằng kim đơn giản bằng JavaScript. Hy vọng bạn đã thấy thú vị và hữu ích cho sự phát triển kỹ năng lập trình của mình. Hãy thử nghiệm và tinh chỉnh mã nguồn để tạo ra những hiệu ứng đồng hồ độc đáo theo ý tưởng của bạn!

Facebook: Dịch Vụ Mạng Xã Hội Đà Nẵng
Zalo: Dịch Vụ Đà Nẵng
Phone: 0333.110304
Gmail: mxhdn.xyz@gmail.com
Thanh toán: Ngân hàng, thẻ cào siêu rẻ, Momo, ViettelPay, card + 35% phí,...