Blog iTeam OS
Trang chủ
Blogspot Tips

Tạo đồng hồ Analog Clock bằng Javascript và CSS

Đối với hướng dẫn hôm nay, chúng ta cần HTML, CSS và vanilla Javascript. Chúng ta tìm hiểu cách sử dụng đối tượng ngày tháng để lấy thời gian hiện tại

Xin chào và chào mừng đến với hướng dẫn hôm nay. Trong hướng dẫn hôm nay, chúng ta sẽ tạo một đồng hồ analog. Đây là một trong những dự án phổ biến nhất và đơn giản nhất cho người mới bắt đầu javascript. Vì vậy, nếu bạn là người mới bắt đầu thì đây là một dự án hoàn hảo cho bạn. Ngoài ra, tôi có toàn bộ danh sách các dự án javascript với mã nguồn. Nếu bạn quan tâm đến việc học javascript với các dự án từng bước, bạn có thể kiểm tra danh sách phát tại đây

Tạo đồng hồ Analog Clock bằng Javascript và CSS
Tạo đồng hồ Analog Clock bằng Javascript và CSS
Demo

Đối với hướng dẫn hôm nay, chúng ta cần HTML, CSS và vanilla Javascript. Chúng ta tìm hiểu cách sử dụng đối tượng ngày tháng để lấy thời gian hiện tại và cách chúng ta có thể sử dụng các phép tính cơ bản để chuyển đổi chúng thành độ để đặt kim đồng hồ

1. HTML:-

Chúng tôi bắt đầu bằng cách tạo một tệp HTML

<html>

<head>
  <title>JS and css analog clock by Best Tutorials</title>
</head>
<link type="text/css" rel="stylesheet" href="style.css" />
<body>
  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>
</body>
<script src="script.js" type="text/javascript" ></script>
</html>

2. CSS:-

Bây giờ, đến với CSS. Sao chép mã bên dưới và dán vào biểu định kiểu của bạn. Vì chúng tôi đã có hình ảnh giờ đồng hồ, tất cả những gì chúng tôi phải làm trong CSS là tạo kiểu và định vị kim

<style type="text/css" rel="stylesheet">
html {
    background: #fff url('https://i.imgur.com/264bULg.jpg');
    background-size: cover;
    font-family: "helvetica neue";
    text-align: center;
    font-size: 10px;
  }
  
  body {
    margin: 0;
    font-size: 2rem;
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    position: relative;
  }
  
  .clock {
    border: 2px solid black;
    background-color: rgb(255 255 255);
    box-shadow: 0px 0px 16px rgb(0 0 0 / 50%);
    visibility: hidden;
    width: 360px;
    height: 360px;
    background: url('https://i.imgur.com/nTrKiPe.png');
    background-size: 100%;
    border-radius: 50%;
    top: 10%;
    right: 10%;
    position: absolute;
    padding: 2rem;
  }
  
  .clock-face {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .hand {
    width: 190px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 190px 14px;
    background-position: right center;
    transform-origin: 150px 10px;
    position: absolute;
    top: calc(50% - 10px);
    right: calc( 50% - 40px);
    transform: rotate(90deg);
  }
  
  .hour-hand {
    background-image: url(https://i.imgur.com/qOSj03F.png);

  }
  
  .min-hand {
    background-image: url(https://i.imgur.com/DCIRlXh.png);
  }
  
  .second-hand {
    background-image: url(https://i.imgur.com/rVQqZym.png);
  
  }
  </style>

3. Javascript:-

Chúng tôi thêm chức năng vào đồng hồ này bằng cách sử dụng javascript. Sao chép mã bên dưới và dán vào tệp javascript của bạn. Chúng tôi lấy từng phần tử của ván bài và gán chúng cho các biến có tên

<script type="text/javascript" >
const secondHand = document.querySelector(".second-hand");
const minsHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
const clockContainer =  document.querySelector(".clock");

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

  const miliseconds = now.getMilliseconds();
  const seconds = now.getSeconds();
  const secondsDegrees = (seconds+(miliseconds/1000)) /  60 * 360  + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = mins / 60 * 360 + seconds / 60 * 6 + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = hour / 12 * 360 + mins / 60 * 30 + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

const delay = 10;
function initialAnalogClock(){
     clockContainer.style.visibility = 'visible';
    analogClock();
    setInterval(analogClock,delay);
}
initialAnalogClock();
</script>

Kết luận:-

Trên đây là cách code một đồng hồ treo tường đơn giản bằng javascript và css. Ngoài ra code trên còn sử dụng hình ảnh của kim đồng hồ, hình nền.

Truy cập Bypass Google Account APK để tải file APK nhé